fix: better setting wrapping, close #423

Xyphyn · Sep 7, 2024 · e1fc446 · e1fc446
1 parent cbe3cbc
commit e1fc446
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/src/routes/settings/Setting.svelte b/src/routes/settings/Setting.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <div
-  class="flex flex-col w-full justify-between gap-2 max-w-full {$$props.mainClass}"
+  class="flex flex-col w-full justify-between gap-2 max-w-full @container/setting {$$props.mainClass}"
 >
   {#if Object.values(supportedPlatforms).some((v) => v == false)}
     <div class="flex items-center gap-2 flex-wrap">
@@ -42,8 +42,12 @@
       {/if}
     </div>
   {/if}
-  <div class="flex flex-row items-center gap-2 {$$props.itemsClass}">
-    <div class="flex flex-col gap-0.5 flex-[2] {$$props.class}">
+  <div
+    class="flex flex-col @md/setting:flex-row items-center gap-2 {$$props.itemsClass}"
+  >
+    <div
+      class="flex flex-col gap-0.5 flex-[2] w-full flex-shrink-0 min-w-48 {$$props.class}"
+    >
       <h1 class="font-medium text-base"><slot name="title" /></h1>
       {#if $$slots.description}
         <p class="text-slate-800 dark:text-zinc-200 text-sm">
@@ -53,7 +57,8 @@
     </div>
     {#if $$slots.default}
       <div
-        class="w-full flex flex-col gap-2 flex-1 items-end max-w-full {$$props.optionClass}"
+        class="w-full flex flex-col gap-2 flex-1 max-w-full
+         @md/setting:items-end flex-shrink-0 {$$props.optionClass}"
       >
         <slot />
       </div>