From 5f9ecb94667e5439b454ccd3b522a7a8ab562377 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Fri, 6 Aug 2021 08:32:13 +0700
Subject: [PATCH 1/2] resize form input to not cut text

---
 .../views/infra/zone/IpAddressRangeForm.vue   | 51 ++++++++++++-------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/ui/src/views/infra/zone/IpAddressRangeForm.vue b/ui/src/views/infra/zone/IpAddressRangeForm.vue
index cbb5463573d4..f8b1e1043ce3 100644
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@@ -37,8 +37,8 @@
           :layout="isMobile() ? 'horizontal': 'inline'"
           :form="form"
           @submit="handleAddRange">
-          <a-row :gutter="12">
-            <a-col :md="4" :lg="4">
+          <div class="form-row">
+            <div class="form-col">
               <a-form-item>
                 <a-input
                   v-decorator="[ 'gateway', {
@@ -48,8 +48,8 @@
                   autoFocus
                 />
               </a-form-item>
-            </a-col>
-            <a-col :md="4" :lg="4">
+            </div>
+            <div class="form-col">
               <a-form-item>
                 <a-input
                   v-decorator="[ 'netmask', {
@@ -58,16 +58,16 @@
                   :placeholder="$t('label.netmask')"
                 />
               </a-form-item>
-            </a-col>
-            <a-col :md="4" :lg="4">
+            </div>
+            <div class="form-col">
               <a-form-item>
                 <a-input
                   v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
                   :placeholder="$t('label.vlan')"
                 />
               </a-form-item>
-            </a-col>
-            <a-col :md="4" :lg="4">
+            </div>
+            <div class="form-col">
               <a-form-item>
                 <a-input
                   v-decorator="[ 'startIp', {
@@ -86,8 +86,8 @@
                   :placeholder="$t('label.start.ip')"
                 />
               </a-form-item>
-            </a-col>
-            <a-col :md="4" :lg="4">
+            </div>
+            <div class="form-col">
               <a-form-item>
                 <a-input
                   v-decorator="[ 'endIp', {
@@ -105,13 +105,13 @@
                   :placeholder="$t('label.end.ip')"
                 />
               </a-form-item>
-            </a-col>
-            <a-col :md="4" :lg="4">
-              <a-form-item :style="{ display: 'inline-block', float: 'right' }">
+            </div>
+            <div class="form-col">
+              <a-form-item :style="{ display: 'inline-block', float: 'right', marginRight: 0 }">
                 <a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
               </a-form-item>
-            </a-col>
-          </a-row>
+            </div>
+          </div>
         </a-form>
       </template>
     </a-table>
@@ -180,12 +180,12 @@ export default {
         {
           title: this.$t('label.gateway'),
           dataIndex: 'gateway',
-          width: 150
+          width: 140
         },
         {
           title: this.$t('label.netmask'),
           dataIndex: 'netmask',
-          width: 150
+          width: 140
         },
         {
           title: this.$t('label.vlan'),
@@ -195,12 +195,12 @@ export default {
         {
           title: this.$t('label.start.ip'),
           dataIndex: 'startIp',
-          width: 130
+          width: 140
         },
         {
           title: this.$t('label.end.ip'),
           dataIndex: 'endIp',
-          width: 130
+          width: 140
         },
         {
           title: '',
@@ -283,3 +283,16 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+.form-row {
+  display: grid;
+  grid-template-columns: 140px 140px 130px 140px 140px 70px;
+  justify-content: center;
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

From 3a8f094bb97ffe687e616b86a30efb06beb4855c Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Fri, 6 Aug 2021 15:48:25 +0700
Subject: [PATCH 2/2] fix field width on firefox

---
 ui/src/views/infra/zone/IpAddressRangeForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/views/infra/zone/IpAddressRangeForm.vue b/ui/src/views/infra/zone/IpAddressRangeForm.vue
index f8b1e1043ce3..866eeb2e649e 100644
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@@ -287,7 +287,7 @@ export default {
 <style scoped lang="less">
 .form-row {
   display: grid;
-  grid-template-columns: 140px 140px 130px 140px 140px 70px;
+  grid-template-columns: 145px 145px 130px 145px 145px 70px;
   justify-content: center;
 
   @media (max-width: 768px) {