r-input gets too small to read on small screens (CSS issue)

[lrq3000]

On small screens, the r-input component gets resized to a too small size to read. Strangely on iooxa.dev, the example r-input keeps its size, but I could not find any way to modify the CSS to force the r-input to do that.

Here is what it looks like, using the Chrome Web Development tools (F12):

I also tested on a phone and it's the same.

For the moment I could improve a bit the readability by increasing the font-size:

r-input, input, mwc-textfield, .mdc-floating-label, .mdc-floating-label--float-above, .mdc-text-field--filled {
    font-size: 130% !important;
}
body {
    --mdc-typography-subtitle1-font-size: 100%;
}

But I don't know why I can't modify other properties such as height or width, it seems that the CSS is bundled with the components javascript code so it's hard to change :-/

PS: Example code to reproduce the above page:

<script src="https://unpkg.com/@iooxa/article"></script>
<link rel="stylesheet" href="https://unpkg.com/@iooxa/article/dist/iooxa.css">

<div style="display: flex; flex-direction: column">
<r-var name="a" value="1" type="Number"></r-var>
<r-var name="b" value="10" type="Number"></r-var>
<r-var name="c" value="100" type="Number"></r-var>
<r-var name="sum" :value="a+b+c" type="Number"></r-var>
<r-var name="sumsquared" :value="sum**2" type="Number"></r-var>

<r-input label="a" :value="a" :change="{a: parseFloat(value)}"></r-input>
<r-input label="b" :value="b" :change="{b: parseFloat(value)}"></r-input>
<r-input label="c" :value="c" :change="{c: parseFloat(value)}"></r-input>
<r-input label="Sum" :value="sum" :change="{sum: value, a: value-b-c}"></r-input> <!-- Simply change one variable so that the input sum is correct -->
<r-input label="Sum squared" bind="sumsquared"></r-input>
</div>