From 1b10e16b2df8f730cbda333d04ac9cc148999a9a Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 30 Dec 2024 19:09:55 -0500
Subject: [PATCH] Adjust styles on various views (#2105)

---
 src/views/DownloadGitView.vue            | 68 +++++++++++-------------
 src/views/InstallView.vue                |  4 --
 src/views/UserSelectView.vue             |  2 +-
 src/views/templates/BaseViewTemplate.vue |  2 +-
 4 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/src/views/DownloadGitView.vue b/src/views/DownloadGitView.vue
index 1cb953e88..347a12b29 100644
--- a/src/views/DownloadGitView.vue
+++ b/src/views/DownloadGitView.vue
@@ -1,45 +1,41 @@
 <template>
   <BaseViewTemplate>
     <div
-      class="col-start-1 h-screen row-start-1 place-content-center mx-auto overflow-y-auto"
+      class="max-w-screen-sm flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-right-top bg-origin-padding"
     >
-      <div
-        class="max-w-screen-sm flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-right-top bg-origin-padding"
-      >
-        <!-- Header -->
-        <h1 class="mt-24 text-4xl font-bold text-red-500">
-          {{ $t('downloadGit.title') }}
-        </h1>
+      <!-- Header -->
+      <h1 class="mt-24 text-4xl font-bold text-red-500">
+        {{ $t('downloadGit.title') }}
+      </h1>
 
-        <!-- Message -->
-        <div class="space-y-4">
-          <p class="text-xl">
-            {{ $t('downloadGit.message') }}
-          </p>
-          <p class="text-xl">
-            {{ $t('downloadGit.instructions') }}
-          </p>
-          <p class="text-m">
-            {{ $t('downloadGit.warning') }}
-          </p>
-        </div>
+      <!-- Message -->
+      <div class="space-y-4">
+        <p class="text-xl">
+          {{ $t('downloadGit.message') }}
+        </p>
+        <p class="text-xl">
+          {{ $t('downloadGit.instructions') }}
+        </p>
+        <p class="text-m">
+          {{ $t('downloadGit.warning') }}
+        </p>
+      </div>
 
-        <!-- Actions -->
-        <div class="flex gap-4 flex-row-reverse">
-          <Button
-            :label="$t('downloadGit.gitWebsite')"
-            icon="pi pi-external-link"
-            icon-pos="right"
-            @click="openGitDownloads"
-            severity="primary"
-          />
-          <Button
-            :label="$t('downloadGit.skip')"
-            icon="pi pi-exclamation-triangle"
-            @click="skipGit"
-            severity="secondary"
-          />
-        </div>
+      <!-- Actions -->
+      <div class="flex gap-4 flex-row-reverse">
+        <Button
+          :label="$t('downloadGit.gitWebsite')"
+          icon="pi pi-external-link"
+          icon-pos="right"
+          @click="openGitDownloads"
+          severity="primary"
+        />
+        <Button
+          :label="$t('downloadGit.skip')"
+          icon="pi pi-exclamation-triangle"
+          @click="skipGit"
+          severity="secondary"
+        />
       </div>
     </div>
   </BaseViewTemplate>
diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
index 5709f337f..e68e6d3c2 100644
--- a/src/views/InstallView.vue
+++ b/src/views/InstallView.vue
@@ -169,8 +169,4 @@ onMounted(async () => {
 :deep(.p-steppanel) {
   @apply bg-transparent;
 }
-
-.stepper {
-  margin-top: max(1rem, max(0px, calc((100vh - 42rem) * 0.5)));
-}
 </style>
diff --git a/src/views/UserSelectView.vue b/src/views/UserSelectView.vue
index 39478159f..e06a55298 100644
--- a/src/views/UserSelectView.vue
+++ b/src/views/UserSelectView.vue
@@ -2,7 +2,7 @@
   <BaseViewTemplate dark>
     <main
       id="comfy-user-selection"
-      class="mt-[5vh] 2xl:mt-[20vh] min-w-84 relative rounded-lg bg-[var(--comfy-menu-bg)] p-5 px-10 shadow-lg"
+      class="min-w-84 relative rounded-lg bg-[var(--comfy-menu-bg)] p-5 px-10 shadow-lg"
     >
       <h1 class="my-2.5 mb-7 font-normal">ComfyUI</h1>
       <div class="flex w-full flex-col items-center">
diff --git a/src/views/templates/BaseViewTemplate.vue b/src/views/templates/BaseViewTemplate.vue
index d558d253a..e6ce2c3c3 100644
--- a/src/views/templates/BaseViewTemplate.vue
+++ b/src/views/templates/BaseViewTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="font-sans w-screen h-screen flex items-center justify-center pointer-events-auto"
+    class="font-sans w-screen h-screen flex items-center justify-center pointer-events-auto overflow-auto"
     :class="[
       props.dark
         ? 'text-neutral-300 bg-neutral-900 dark-theme'