From 4e370cd056cdbaab8e63632915f8c2d538dfc763 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sun, 21 Jul 2024 17:58:40 +0200
Subject: [PATCH] refactor: :lipstick: Add max width to settings pages

---
 components/settings/renderer.vue   | 58 ++++++++++++++++--------------
 components/sidebars/navigation.vue |  2 +-
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/components/settings/renderer.vue b/components/settings/renderer.vue
index d101f94..79510f4 100644
--- a/components/settings/renderer.vue
+++ b/components/settings/renderer.vue
@@ -1,31 +1,35 @@
 <template>
-    <div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100">
-        <Switch.Root v-model:checked="checked" class="grid grid-cols-[1fr_auto] gap-x-4"
-            @click="setting.notImplemented ? $event.preventDefault() : undefined"
-            v-if="setting.type === SettingType.Boolean" @update:checked="c => checked = c">
-            <Switch.Label :data-disabled="setting.notImplemented ? '' : undefined"
-                class="row-start-1 select-none text-base/6 data-[disabled]:opacity-50 sm:text-sm/6 text-white font-semibold">
-                {{
-                    setting.title
-                }}</Switch.Label>
-            <p v-if="setting.notImplemented" class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented
-            </p>
-            <p v-else :data-disabled="setting.notImplemented ? '' : undefined"
-                class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
-                    setting.description }}
-            </p>
-            <Switch.Control :data-disabled="setting.notImplemented ? '' : undefined"
-                :data-checked="checked ? '' : undefined"
-                class="group col-start-2 relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-[changing]:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ring-1 ring-inset bg-white/5 ring-white/15 data-[checked]:bg-[--switch-bg] data-[checked]:ring-[--switch-bg-ring] focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-500 hover:data-[checked]:ring-[--switch-bg-ring] hover:ring-white/25 data-[disabled]:bg-zinc-200 data-[disabled]:data-[checked]:bg-zinc-200 data-[disabled]:opacity-50 data-[disabled]:bg-white/15 data-[disabled]:data-[checked]:bg-white/15 data-[disabled]:data-[checked]:ring-white/15 [--switch-bg-ring:transparent] [--switch-bg:theme(colors.primary.600/25%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] [--switch-ring:theme(colors.white/10%)]">
-                <Switch.Thumb
-                    class="pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5 translate-x-0 transition duration-200 ease-in-out border border-transparent bg-white shadow ring-1 ring-black/5 group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring] group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3 group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5" />
-            </Switch.Control>
-            <Switch.HiddenInput />
-        </Switch.Root>
-        <div v-else class="grid grid-cols-[1fr_auto] gap-x-4">
-            <h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title }}
-            </h4>
-            <p class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented</p>
+    <div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100 h-full">
+        <div class="max-w-7xl mx-auto h-full">
+            <Switch.Root v-model:checked="checked" class="grid grid-cols-[1fr_auto] gap-x-4"
+                @click="setting.notImplemented ? $event.preventDefault() : undefined"
+                v-if="setting.type === SettingType.Boolean" @update:checked="c => checked = c">
+                <Switch.Label :data-disabled="setting.notImplemented ? '' : undefined"
+                    class="row-start-1 select-none text-base/6 data-[disabled]:opacity-50 sm:text-sm/6 text-white font-semibold">
+                    {{
+                        setting.title
+                    }}</Switch.Label>
+                <p v-if="setting.notImplemented" class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not
+                    implemented
+                </p>
+                <p v-else :data-disabled="setting.notImplemented ? '' : undefined"
+                    class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
+                        setting.description }}
+                </p>
+                <Switch.Control :data-disabled="setting.notImplemented ? '' : undefined"
+                    :data-checked="checked ? '' : undefined"
+                    class="group col-start-2 relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-[changing]:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ring-1 ring-inset bg-white/5 ring-white/15 data-[checked]:bg-[--switch-bg] data-[checked]:ring-[--switch-bg-ring] focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-500 hover:data-[checked]:ring-[--switch-bg-ring] hover:ring-white/25 data-[disabled]:bg-zinc-200 data-[disabled]:data-[checked]:bg-zinc-200 data-[disabled]:opacity-50 data-[disabled]:bg-white/15 data-[disabled]:data-[checked]:bg-white/15 data-[disabled]:data-[checked]:ring-white/15 [--switch-bg-ring:transparent] [--switch-bg:theme(colors.primary.600/25%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] [--switch-ring:theme(colors.white/10%)]">
+                    <Switch.Thumb
+                        class="pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5 translate-x-0 transition duration-200 ease-in-out border border-transparent bg-white shadow ring-1 ring-black/5 group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring] group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3 group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5" />
+                </Switch.Control>
+                <Switch.HiddenInput />
+            </Switch.Root>
+            <div v-else class="grid grid-cols-[1fr_auto] gap-x-4">
+                <h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
+                    }}
+                </h4>
+                <p class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented</p>
+            </div>
         </div>
     </div>
 </template>
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 638209b..49a0cc8 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -1,6 +1,6 @@
 <template>
     <aside
-        class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
+        class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
         aria-label="Navigation" role="complementary">
         <NuxtLink href="/">
             <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"