Merge pull request #395 from Dstack-TEE/fix-ui

vmm-ui: Fix gpu editor layout

Author: kvinwang

vmm/src/console_beta.html

@@ -1244,8 +1244,16 @@
   row-gap: 16px;
 }
 
+.gpu-checkbox-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  row-gap: 16px;
+}
+
 .feature-checkboxes label,
-.checkbox-grid label {
+.checkbox-grid label,
+.gpu-checkbox-grid label {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1254,7 +1262,8 @@
 }
 
 .feature-checkboxes input[type="checkbox"],
-.checkbox-grid input[type="checkbox"] {
+.checkbox-grid input[type="checkbox"],
+.gpu-checkbox-grid input[type="checkbox"] {
   flex-shrink: 0;
   cursor: pointer;
   margin: 0;
@@ -1419,18 +1428,11 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
   background: var(--color-bg-secondary);
 }
 
-.gpu-config-items label {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.gpu-checkbox-grid label {
   font-size: 14px;
-  cursor: pointer;
 }
 
 .warning-text {
@@ -1749,10 +1751,12 @@ <h4 class="env-editor-title">Encrypted Environment Variables</h4>
           Select GPUs to attach:
         </div>
         <div class="gpu-config-items">
-          <label v-for="gpu in availableGpus" :key="gpu.slot">
-            <input type="checkbox" :value="gpu.slot" v-model="selectedGpus">
-            <span>{{ gpu.slot }}: {{ gpu.description }} {{ gpu.is_free ? '' : '(in use)' }}</span>
-          </label>
+          <div class="gpu-checkbox-grid">
+            <label v-for="gpu in availableGpus" :key="gpu.slot">
+              <input type="checkbox" :value="gpu.slot" v-model="selectedGpus">
+              <span>{{ gpu.slot }}: {{ gpu.description }} {{ gpu.is_free ? '' : '(in use)' }}</span>
+            </label>
+          </div>
         </div>
       </div>
       <div v-else class="gpu-config-hint">

vmm/ui/src/components/GpuConfigEditor.ts

@@ -61,10 +61,12 @@ const GpuConfigEditorComponent = {
           Select GPUs to attach:
         </div>
         <div class="gpu-config-items">
-          <label v-for="gpu in availableGpus" :key="gpu.slot">
-            <input type="checkbox" :value="gpu.slot" v-model="selectedGpus">
-            <span>{{ gpu.slot }}: {{ gpu.description }} {{ gpu.is_free ? '' : '(in use)' }}</span>
-          </label>
+          <div class="gpu-checkbox-grid">
+            <label v-for="gpu in availableGpus" :key="gpu.slot">
+              <input type="checkbox" :value="gpu.slot" v-model="selectedGpus">
+              <span>{{ gpu.slot }}: {{ gpu.description }} {{ gpu.is_free ? '' : '(in use)' }}</span>
+            </label>
+          </div>
         </div>
       </div>
       <div v-else class="gpu-config-hint">

vmm/ui/src/styles/main.css

@@ -1232,8 +1232,16 @@ h1, h2, h3, h4, h5, h6 {
   row-gap: 16px;
 }
 
+.gpu-checkbox-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  row-gap: 16px;
+}
+
 .feature-checkboxes label,
-.checkbox-grid label {
+.checkbox-grid label,
+.gpu-checkbox-grid label {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1242,7 +1250,8 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .feature-checkboxes input[type="checkbox"],
-.checkbox-grid input[type="checkbox"] {
+.checkbox-grid input[type="checkbox"],
+.gpu-checkbox-grid input[type="checkbox"] {
   flex-shrink: 0;
   cursor: pointer;
   margin: 0;
@@ -1407,18 +1416,11 @@ h1, h2, h3, h4, h5, h6 {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
   background: var(--color-bg-secondary);
 }
 
-.gpu-config-items label {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.gpu-checkbox-grid label {
   font-size: 14px;
-  cursor: pointer;
 }
 
 .warning-text {