Setting dialog responsive design for smaller screen size (screen width < 1536) (#1472)

* Smaller queue button

* Smaller dialog padding

* Adjust setting content

* Fix keybinding panel

src/components/actionbar/ComfyQueueButton.vue

@@ -4,6 +4,7 @@
       class="comfyui-queue-button"
       :label="activeQueueModeMenuItem.label"
       severity="primary"
+      size="small"
       @click="queuePrompt"
       :model="queueModeMenuItems"
       data-testid="queue-button"
@@ -24,6 +25,7 @@
           :label="item.label"
           :icon="item.icon"
           :severity="item.key === queueMode ? 'primary' : 'secondary'"
+          size="small"
           text
           v-tooltip="item.tooltip"
         />

src/components/common/FileDownload.vue

@@ -16,6 +16,7 @@
         size="small"
         outlined
         :disabled="props.error"
+        :title="props.url"
         @click="download.triggerBrowserDownload"
       />
     </div>

src/components/dialog/GlobalDialog.vue

@@ -2,6 +2,7 @@
 <template>
   <Dialog
     v-model:visible="dialogStore.isVisible"
+    class="global-dialog"
     modal
     closable
     closeOnEscape
@@ -11,7 +12,6 @@
     @hide="dialogStore.closeDialog"
     @maximize="onMaximize"
     @unmaximize="onUnmaximize"
-    :pt="{ header: 'pb-0' }"
     :aria-labelledby="headerId"
   >
     <template #header>
@@ -57,3 +57,15 @@ const contentProps = computed(() =>
 
 const headerId = `dialog-${Math.random().toString(36).substr(2, 9)}`
 </script>
+
+<style>
+.global-dialog .p-dialog-header {
+  @apply p-2 2xl:p-[var(--p-dialog-header-padding)];
+  @apply pb-0;
+}
+
+.global-dialog .p-dialog-content {
+  @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
+  @apply pt-0;
+}
+</style>

src/components/dialog/content/SettingDialogContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="settings-container">
-    <ScrollPanel class="settings-sidebar flex-shrink-0 p-2 w-64">
+    <ScrollPanel class="settings-sidebar flex-shrink-0 p-2 w-48 2xl:w-64">
       <SearchBox
         class="settings-search-box w-full mb-2"
         v-model:modelValue="searchQuery"
@@ -16,7 +16,7 @@
         class="border-none w-full"
       />
     </ScrollPanel>
-    <Divider layout="vertical" />
+    <Divider layout="vertical" class="mx-1 2xl:mx-4" />
     <ScrollPanel class="settings-content flex-grow">
       <Tabs :value="tabValue">
         <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -19,7 +19,7 @@
       </template>
       <Column field="actions" header="">
         <template #body="slotProps">
-          <div class="actions invisible">
+          <div class="actions invisible flex flex-row">
             <Button
               icon="pi pi-pencil"
               class="p-button-text"
@@ -34,7 +34,21 @@
           </div>
         </template>
       </Column>
-      <Column field="id" header="Command ID" sortable></Column>
+      <Column
+        field="id"
+        header="Command ID"
+        sortable
+        class="max-w-64 2xl:max-w-full"
+      >
+        <template #body="slotProps">
+          <div
+            class="overflow-hidden text-ellipsis whitespace-nowrap"
+            :title="slotProps.data.id"
+          >
+            {{ slotProps.data.id }}
+          </div>
+        </template>
+      </Column>
       <Column field="keybinding" header="Keybinding">
         <template #body="slotProps">
           <KeyComboDisplay
@@ -229,7 +243,7 @@ async function resetKeybindings() {
 
 <style scoped>
 :deep(.p-datatable-tbody) > tr > td {
-  padding: 1px;
+  @apply p-1;
   min-height: 2rem;
 }
 

src/components/dialog/header/SettingDialogHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>
+    <h2 class="px-4">
       <i class="pi pi-cog"></i>
       <span>{{ $t('settings') }}</span>
     </h2>