more phone sizing

RopeScore · Jul 14, 2024 · bc9ac9f · bc9ac9f
1 parent 3059eb0
commit bc9ac9f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -2,7 +2,7 @@
   <div
     class="grid grid-cols-1 min-h-[100vh] w-full"
     :class="{
-      'grid-rows-[3.5rem_auto_4rem_2rem] xl:grid-rows-[3.5rem_auto_2rem_2rem]': !fullscreen,
+      'grid-rows-[3.5rem_auto_8rem_2rem] sm:grid-rows-[3.5rem_auto_4rem_2rem] xl:grid-rows-[3.5rem_auto_2rem_2rem]': !fullscreen,
       'grid-rows-1': fullscreen,
       'h-[100vh]': fullscreen,
       'overflow-y-hidden': fullscreen,

diff --git a/src/components/SystemSettingsFooter.vue b/src/components/SystemSettingsFooter.vue
@@ -12,7 +12,10 @@ const keyColor = useKeyColor()
 
 <template>
   <div
-    class="grid bg-white border-t items-stretch grid-cols-[max-content_auto] grid-rows-2 xl:grid-cols-[max-content_max-content_max-content_auto] xl:grid-rows-1"
+    class="
+      grid bg-white border-t items-stretch
+      grid-rows-4 sm:grid-rows-2 xl:grid-rows-1
+      grid-cols-1 sm:grid-cols-[max-content_auto] xl:grid-cols-[max-content_max-content_max-content_auto]"
   >
     <div class="flex items-center px-4 gap-2 lt-xl:border-b">
       <span>Server: {{ apiDomain }}</span>
@@ -29,7 +32,7 @@ const keyColor = useKeyColor()
     </p>
     <p v-else />
 
-    <div class="xl:border-l px-4 flex items-center gap-2">
+    <div class="xl:border-l lt-sm:border-b px-4 flex items-center gap-2">
       <span>Theme:</span>
       <select-field
         v-model="theme"