watch page: Align the height of sidebars with the watch wrapper in ca…

…se when the page size is wide but not high enough. No margin at the top of the sidebars (fixes #1249)
TUM-Dev · Dec 3, 2023 · b6697f1 · b6697f1
1 parent a74d95e
commit b6697f1
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/web/template/watch.gohtml b/web/template/watch.gohtml
@@ -76,7 +76,7 @@
     <div id="bookmarks-mobile" x-cloak="" x-show="sidebar === watch.SidebarState.Bookmarks"
          class="md:hidden flex absolute top-0 h-screen w-screen z-50 backdrop-brightness-50">
         <div @click.outside="sidebar = watch.SidebarState.Hidden"
-             class="m-auto w-3/4 h-96 bg-white dark:bg-secondary-light border dark:border-gray-800 rounded-lg">
+             class="m-auto w-3/4 h-16/9 bg-white dark:bg-secondary-light border dark:border-gray-800 rounded-lg">
             {{template "bookmarks-modal" $stream.ID}}
         </div>
     </div>
@@ -401,8 +401,8 @@
             <div x-show="sidebar === watch.SidebarState.Chat"
                  :class="sidebar === watch.SidebarState.Chat ? 'lg:basis-1/4' : 'lg:basis-0'"
                  class="z-20 basis-full order-5
-                        md:px-2 md:pt-2
-                        lg:h-16/6 h-96 lg:order-none">
+                        md:px-2
+                        lg:h-16/6 h-16/9 lg:order-none">
                 <div class="border dark:border-gray-800 rounded-lg h-full">
                     {{template "chat-component" .ChatData}}
                 </div>
@@ -413,7 +413,7 @@
         {{if .IndexData.TUMLiveContext.User}}
             <div id="bookmarks-desktop" x-cloak="" x-show="sidebar === watch.SidebarState.Bookmarks"
                  :class="sidebar === watch.SidebarState.Bookmarks ? 'lg:basis-1/4' : 'lg:basis-0'"
-                 class="hidden md:block basis-full h-96 lg:h-16/6 px-5 md:px-2 md:pt-2 lg:order-none order-4">
+                 class="hidden md:block basis-full h-16/9 lg:h-16/6 px-5 md:px-2 lg:order-none order-4">
                 {{template "bookmarks-modal" $stream.ID}}
             </div>
         {{end}}
@@ -422,7 +422,7 @@
         {{if .IndexData.TUMLiveContext.User}}
             <div id="streams-box" x-cloak="" x-show="sidebar === watch.SidebarState.Streams"
                  :class="sidebar === watch.SidebarState.Streams ? 'lg:basis-1/4' : 'lg:basis-0'"
-                 class="order-4 z-20 basis-full px-5 md:px-2 md:pt-2 lg:order-none lg:h-16/6 h-96">
+                 class="order-4 z-20 basis-full px-5 md:px-2 lg:order-none lg:h-16/6 h-96">
                 {{template "playlist" $stream.ID}}
             </div>
         {{end}}