fix(base-converter): responsive input

1 files changed, 25 insertions, 12 deletions

diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue
index 6b070bd..bec0902 100644
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -1,27 +1,37 @@
 <template>
   <div>
     <n-card>
-      <n-input-group>
-        <n-input-group-label style="width: 200px"> Input number: </n-input-group-label>
-        <n-input-number v-model:value="inputNumber" min="0" />
+      <div v-if="styleStore.isSmallScreen">
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
+          <n-input-number v-model:value="inputNumber" min="0" style="width: 100%" />
+        </n-input-group>
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
+          <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100%" />
+        </n-input-group>
+      </div>
 
-        <n-input-group-label style="width: 200px"> Input base: </n-input-group-label>
-        <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100px" />
+      <n-input-group v-else>
+        <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
+        <n-input-number v-model:value="inputNumber" min="0" />
+        <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
+        <n-input-number v-model:value="inputBase" max="64" min="2" />
       </n-input-group>
       <n-divider />
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Binary (2): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Binary (2): </n-input-group-label>
         <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })" readonly />
       </n-input-group>
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Octale (8): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Octale (8): </n-input-group-label>
         <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })" readonly />
       </n-input-group>
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Decimal (10): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Decimal (10): </n-input-group-label>
         <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
           readonly
@@ -29,7 +39,7 @@
       </n-input-group>
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Hexadecimal (16): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Hexadecimal (16): </n-input-group-label>
         <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
           readonly
@@ -37,15 +47,15 @@
       </n-input-group>
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Base64 (64): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Base64 (64): </n-input-group-label>
         <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
           readonly
         />
       </n-input-group>
       <n-input-group>
-        <n-input-group-label style="width: 90px"> Custom: </n-input-group-label>
-        <n-input-number v-model:value="outputBase" style="width: 110px" max="64" min="2" />
+        <n-input-group-label style="flex: 0 0 85px"> Custom: </n-input-group-label>
+        <n-input-number v-model:value="outputBase" style="flex: 0 0 86px" max="64" min="2" />
         <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
           readonly
@@ -59,6 +69,9 @@
 import { ref } from 'vue';
 import { convertBase } from './integer-base-converter.model';
 import InputCopyable from '../../components/InputCopyable.vue';
+import { useStyleStore } from '@/stores/style.store';
+
+const styleStore = useStyleStore();
 
 const inputNumber = ref(42);
 const inputBase = ref(10);