fix: node selector styles broken in medium width screen

Author: 0xJacky

app/src/components/NodeSelector/NodeSelector.vue

@@ -54,7 +54,7 @@ const noData = computed(() => {
 <template>
   <ACheckboxGroup
     v-model:value="value"
-    style="width: 100%"
+    class="w-full"
     :class="{
       'justify-center': noData,
     }"
@@ -63,10 +63,7 @@ const noData = computed(() => {
       v-if="!noData"
       :gutter="[16, 16]"
     >
-      <ACol
-        v-if="!hiddenLocal"
-        :span="8"
-      >
+      <ACol v-if="!hiddenLocal">
         <ACheckbox :value="0">
           {{ $gettext('Local') }}
         </ACheckbox>
@@ -77,7 +74,6 @@ const noData = computed(() => {
       <ACol
         v-for="(node, index) in data"
         :key="index"
-        :span="8"
       >
         <ACheckbox :value="node.id">
           {{ node.name }}

app/src/views/domain/DomainEdit.vue

@@ -162,7 +162,8 @@ provide('data', data)
     <ACol
       :xs="24"
       :sm="24"
-      :md="18"
+      :md="16"
+      :lg="18"
     >
       <ACard :bordered="false">
         <template #title>
@@ -240,7 +241,8 @@ provide('data', data)
       class="col-right"
       :xs="24"
       :sm="24"
-      :md="6"
+      :md="8"
+      :lg="6"
     >
       <RightSettings />
     </ACol>

app/src/views/domain/components/Deploy.vue

@@ -72,36 +72,38 @@ function deploy() {
 </script>
 
 <template>
-  <ContextHolder />
-  <NodeSelector
-    v-model:target="target"
-    hidden-local
-    :map="node_map"
-  />
-  <div class="node-deploy-control">
-    <ACheckbox v-model:checked="enabled">
-      {{ $gettext('Enable') }}
-    </ACheckbox>
-    <div class="overwrite">
-      <ACheckbox v-model:checked="overwrite">
-        {{ $gettext('Overwrite') }}
+  <div>
+    <ContextHolder />
+    <NodeSelector
+      v-model:target="target"
+      hidden-local
+      :map="node_map"
+    />
+    <div class="node-deploy-control">
+      <ACheckbox v-model:checked="enabled">
+        {{ $gettext('Enable') }}
       </ACheckbox>
-      <ATooltip placement="bottom">
-        <template #title>
-          {{ $gettext('Overwrite exist file') }}
-        </template>
-        <InfoCircleOutlined />
-      </ATooltip>
-    </div>
+      <div class="overwrite">
+        <ACheckbox v-model:checked="overwrite">
+          {{ $gettext('Overwrite') }}
+        </ACheckbox>
+        <ATooltip placement="bottom">
+          <template #title>
+            {{ $gettext('Overwrite exist file') }}
+          </template>
+          <InfoCircleOutlined />
+        </ATooltip>
+      </div>
 
-    <AButton
-      :disabled="target.length === 0"
-      type="primary"
-      ghost
-      @click="deploy"
-    >
-      {{ $gettext('Deploy') }}
-    </AButton>
+      <AButton
+        :disabled="target.length === 0"
+        type="primary"
+        ghost
+        @click="deploy"
+      >
+        {{ $gettext('Deploy') }}
+      </AButton>
+    </div>
   </div>
 </template>