Restyle SettingGroup (#1125)

* Setting group CSS

* nit

* nit

* Dim label color

* nit

* Set width

src/components/common/InputSlider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-slider">
+  <div class="input-slider flex flex-row items-center gap-2">
     <Slider
       :modelValue="modelValue"
       @update:modelValue="updateValue"
@@ -17,6 +17,7 @@
       :min="min"
       :max="max"
       :step="step"
+      :allowEmpty="false"
     />
   </div>
 </template>
@@ -69,19 +70,3 @@ const updateValue = (newValue: number | null) => {
   emit('update:modelValue', newValue)
 }
 </script>
-
-<style scoped>
-.input-slider {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.slider-part {
-  flex-grow: 1;
-}
-
-.input-part {
-  width: 5rem !important;
-}
-</style>

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

@@ -5,10 +5,10 @@
     <div
       v-for="setting in group.settings"
       :key="setting.id"
-      class="setting-item"
+      class="setting-item flex items-center mb-4"
     >
-      <div class="setting-label">
-        <span>
+      <div class="setting-label flex flex-grow items-center">
+        <span class="text-[var(--p-text-muted-color)]">
           <Tag v-if="setting.experimental" :value="$t('experimental')" />
           <Tag
             v-if="setting.deprecated"
@@ -17,11 +17,11 @@
           {{ setting.name }}
           <i
             v-if="setting.tooltip"
-            class="pi pi-info-circle info-chip"
+            class="pi pi-info-circle bg-transparent"
             v-tooltip="setting.tooltip"
         /></span>
       </div>
-      <div class="setting-input">
+      <div class="setting-input flex justify-end">
         <component
           :is="markRaw(getSettingComponent(setting))"
           :id="setting.id"
@@ -110,45 +110,13 @@ function getSettingComponent(setting: SettingParams): Component {
 </script>
 
 <style scoped>
-.info-chip {
-  background: transparent;
+.setting-input :deep(.input-slider) .p-inputnumber input,
+.setting-input :deep(.input-slider) .slider-part {
+  @apply w-20;
 }
 
-.setting-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.setting-label {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-
-.setting-input {
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  margin-left: 1rem;
-}
-
-/* Ensure PrimeVue components take full width of their container */
 .setting-input :deep(.p-inputtext),
-.setting-input :deep(.input-slider),
-.setting-input :deep(.p-select),
-.setting-input :deep(.p-togglebutton) {
-  width: 100%;
-  max-width: 200px;
-}
-
-.setting-input :deep(.p-inputtext) {
-  max-width: unset;
-}
-
-/* Special case for ToggleSwitch to align it to the right */
-.setting-input :deep(.p-toggleswitch) {
-  margin-left: auto;
+.setting-input :deep(.p-select) {
+  @apply w-44;
 }
 </style>