fix(save & 'working on it'): look good on mobile

modrinth · Oct 31, 2024 · 53502a9 · 53502a9
1 parent 0a25411
commit 53502a9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/apps/frontend/src/components/ui/servers/SaveBanner.vue b/apps/frontend/src/components/ui/servers/SaveBanner.vue
@@ -3,24 +3,26 @@
     <div
       v-if="props.isVisible"
       data-pyro-save-banner
-      class="fixed bottom-8 left-4 right-4 z-50 mx-auto h-fit w-full max-w-4xl rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-4 transition-all duration-300"
+      class="fixed bottom-16 left-0 right-0 z-[6] mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
     >
-      <div class="flex flex-col items-center justify-between gap-2 md:flex-row">
-        <span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
-        <div class="flex gap-2">
-          <ButtonStyled type="transparent" color="standard">
-            <button :disabled="props.isUpdating" @click="props.reset">Reset</button>
-          </ButtonStyled>
-          <ButtonStyled type="standard" :color="props.restart ? 'standard' : 'brand'">
-            <button :disabled="props.isUpdating" @click="props.save">
-              {{ props.isUpdating ? "Saving..." : "Save" }}
-            </button>
-          </ButtonStyled>
-          <ButtonStyled v-if="props.restart" type="standard" color="brand">
-            <button :disabled="props.isUpdating" @click="saveAndRestart">
-              {{ props.isUpdating ? "Saving..." : "Save & Restart" }}
-            </button>
-          </ButtonStyled>
+      <div class="mx-2 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-4">
+        <div class="flex flex-col items-center justify-between gap-2 md:flex-row">
+          <span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
+          <div class="flex gap-2">
+            <ButtonStyled type="transparent" color="standard">
+              <button :disabled="props.isUpdating" @click="props.reset">Reset</button>
+            </ButtonStyled>
+            <ButtonStyled type="standard" :color="props.restart ? 'standard' : 'brand'">
+              <button :disabled="props.isUpdating" @click="props.save">
+                {{ props.isUpdating ? "Saving..." : "Save" }}
+              </button>
+            </ButtonStyled>
+            <ButtonStyled v-if="props.restart" type="standard" color="brand">
+              <button :disabled="props.isUpdating" @click="saveAndRestart">
+                {{ props.isUpdating ? "Saving..." : "Save & Restart" }}
+              </button>
+            </ButtonStyled>
+          </div>
         </div>
       </div>
     </div>

diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -99,16 +99,20 @@
       <Transition name="sync-banner">
         <div
           v-if="status === 'pending'"
-          class="fixed bottom-16 left-2 z-50 mx-auto flex h-fit w-[96%] max-w-4xl flex-row items-center gap-4 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-2 transition-all duration-300 sm:bottom-8 sm:left-4 sm:right-4 sm:w-full sm:shadow-2xl"
+          class="fixed bottom-16 left-0 right-0 z-[6] mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
         >
           <div
-            class="grid size-12 place-content-center overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+            class="mx-2 flex flex-row items-center gap-4 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-2 transition-all duration-300 sm:shadow-2xl"
           >
-            <UiServersIconsLoadingIcon class="size-6 animate-spin" />
-          </div>
-          <div class="flex flex-col gap-0.5">
-            <p class="m-0 text-sm font-bold text-contrast">Working on it...</p>
-            <p class="m-0 text-sm">We're making sure everything's 100% up to date.</p>
+            <div
+              class="grid size-12 place-content-center overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+            >
+              <UiServersIconsLoadingIcon class="size-6 animate-spin" />
+            </div>
+            <div class="flex flex-col gap-0.5">
+              <p class="m-0 text-sm font-bold text-contrast">Working on it...</p>
+              <p class="m-0 text-sm">We're making sure everything's 100% up to date.</p>
+            </div>
           </div>
         </div>
       </Transition>