Watch page: Align sidebars with the watch wrapper (#1251)

* watch page: Align the height of sidebars with the watch wrapper in case when the page size is wide but not high enough. No margin at the top of the sidebars (fixes #1249) * watch page: Align the height of streams-sidebar with the watch wrapper in case when the page size is wide but not high enough.
TUM-Dev · Dec 13, 2023 · c64f3ea · c64f3ea
1 parent 7283eaf
commit c64f3ea
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-16/9">
                 {{template "playlist" $stream.ID}}
             </div>
         {{end}}