Merge pull request #145 from PR0M3TH3AN/codex/fix-disclaimer-modal-layout-on-desktop

Improve disclaimer modal layout

components/disclaimer.html

@@ -20,21 +20,18 @@
   >
     <!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
     <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative flex flex-col"
     >
       <!-- Sticky top bar, if you want a top heading or 'X' button up here -->
       <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
-      >        
+        class="modal-header sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
       </div>
 
       <!-- Main Content -->
-      <div class="p-6">
+      <div class="modal-body flex-1 overflow-y-auto">
         <!-- Scrollable disclaimers area -->
-        <div
-          class="space-y-6 text-gray-300"
-          style="max-height: 70vh; overflow-y: auto"
-        >
+        <div class="space-y-6 text-gray-300">
           <!-- Example: Insert your disclaimers here -->
 
           <div class="flex justify-center mb-8">
@@ -114,16 +111,16 @@
             </div>
           </div>
         </div>
+      </div>
 
-        <!-- Button at bottom -->
-        <div class="mt-6">
-          <button
-            id="acceptDisclaimer"
-            class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition-colors duration-200"
-          >
-            I Understand
-          </button>
-        </div>
+      <!-- Button at bottom -->
+      <div class="modal-footer">
+        <button
+          id="acceptDisclaimer"
+          class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition-colors duration-200"
+        >
+          I Understand
+        </button>
       </div>
     </div>
   </div>

css/style.css

@@ -484,27 +484,37 @@ footer a:hover {
   background-color: rgb(0 0 0 / 0.9);
   z-index: 50;
   /* remove display: none; */
+  display: flex;
   flex-direction: column;
   overflow-y: auto;
   overscroll-behavior: contain;
 }
 
+#disclaimerModal.hidden {
+  display: none !important;
+}
+
 #disclaimerModal .modal-content {
-  width: 100%;
+  width: min(960px, calc(100% - 2rem));
+  max-height: min(90vh, 820px);
   display: flex;
   flex-direction: column;
   background-color: var(--color-bg);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
 }
 
-#disclaimerModal .modal-scroll {
+#disclaimerModal .modal-header {
+  min-height: 1.5rem;
+}
+
+#disclaimerModal .modal-body {
   padding: 1.5rem;
   flex: 1;
   overflow-y: auto;
 }
 
-/* Disclaimer Modal Button Container */
-#disclaimerModal .button-container {
-  padding: 1rem 1.5rem;
+#disclaimerModal .modal-footer {
+  padding: 1.25rem 1.5rem 1.75rem;
   background-color: #1a2234;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
@@ -517,9 +527,14 @@ footer a:hover {
     justify-content: center;
   }
 
-  #disclaimerModal .modal-scroll {
+  #disclaimerModal .modal-body {
+    padding: 2rem 2.5rem 1.5rem;
     max-height: calc(90vh - 5rem);
   }
+
+  #disclaimerModal .modal-footer {
+    padding: 1.5rem 2.5rem 2rem;
+  }
 }
 
 /* Mobile-specific styles for Disclaimer Modal */
@@ -531,6 +546,17 @@ footer a:hover {
   #disclaimerModal .modal-content {
     min-height: 100vh;
     border-radius: 0;
+    max-height: none;
+    width: 100%;
+  }
+
+  #disclaimerModal .modal-body {
+    padding: 1.5rem 1.5rem 1rem;
+    max-height: none;
+  }
+
+  #disclaimerModal .modal-footer {
+    padding: 1rem 1.5rem 2rem;
   }
 }
 

js/app.js

@@ -5265,6 +5265,8 @@ class bitvidApp {
     // Hide login button if present
     if (this.loginButton) {
       this.loginButton.classList.add("hidden");
+      this.loginButton.setAttribute("hidden", "");
+      this.loginButton.style.display = "none";
     }
     // Optionally hide logout or userStatus
     if (this.logoutButton) {
@@ -5277,9 +5279,13 @@ class bitvidApp {
     // Show the upload button, profile button, etc.
     if (this.uploadButton) {
       this.uploadButton.classList.remove("hidden");
+      this.uploadButton.removeAttribute("hidden");
+      this.uploadButton.style.display = "inline-flex";
     }
     if (this.profileButton) {
       this.profileButton.classList.remove("hidden");
+      this.profileButton.removeAttribute("hidden");
+      this.profileButton.style.display = "inline-flex";
     }
 
     // Show the "Subscriptions" link if it exists
@@ -5313,6 +5319,8 @@ class bitvidApp {
     // Show the login button again
     if (this.loginButton) {
       this.loginButton.classList.remove("hidden");
+      this.loginButton.removeAttribute("hidden");
+      this.loginButton.style.display = "";
     }
 
     // Hide logout or userStatus
@@ -5329,9 +5337,13 @@ class bitvidApp {
     // Hide upload & profile
     if (this.uploadButton) {
       this.uploadButton.classList.add("hidden");
+      this.uploadButton.setAttribute("hidden", "");
+      this.uploadButton.style.display = "none";
     }
     if (this.profileButton) {
       this.profileButton.classList.add("hidden");
+      this.profileButton.setAttribute("hidden", "");
+      this.profileButton.style.display = "none";
     }
     if (this.profileChannelLink) {
       this.profileChannelLink.classList.add("hidden");