Use less laggy grid layout strategy for watch page

2 files changed, 10 insertions, 15 deletions

diff --git a/youtube/common.py b/youtube/common.py
index 6061c9b..23b05fb 100644
--- a/youtube/common.py
+++ b/youtube/common.py
@@ -292,7 +292,7 @@ def medium_video_item_html(medium_video_info):
 
 header_template = Template('''
         <header>
-            <div id="header-left">
+
                 <form id="site-search" action="/youtube.com/search">
                     <input type="search" name="query" class="search-box" value="$search_box_value">
                     <button type="submit" value="Search" class="search-button">Search</button>
@@ -316,7 +316,7 @@ header_template = Template('''
                         </div>
                     </div>
                 </form>
-            </div>
+
             <div id="header-right">
                 <form id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self">
                     <input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text">
diff --git a/youtube/shared.css b/youtube/shared.css
index 712a2fe..1c25b6d 100644
--- a/youtube/shared.css
+++ b/youtube/shared.css
@@ -25,7 +25,7 @@ body{
         grid-row: 1;
 
         display:grid;
-        grid-template-columns: 3fr 2fr;
+        grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
     }
 
     main{
@@ -36,12 +36,7 @@ address{
     font-style:normal;
 }
 
-#header-left{
-    grid-column:1;
-    
-    display:grid;
-    grid-template-columns: 1fr 640px;
-}
+
 
     #site-search{
         grid-column: 2;
@@ -106,10 +101,10 @@ address{
 
 
 #header-right{
-    grid-column:2;
+    grid-column:4;
     
     display:grid;
-    grid-template-columns:40px auto auto auto 1fr;
+    grid-template-columns:auto auto auto 1fr;
     grid-template-rows: 1fr;
     width: 540px;
 }
@@ -117,27 +112,27 @@ address{
         display:contents;
     }
         #local-playlists{
-            grid-column: 2;
+            grid-column: 1;
             grid-row:1;
             align-self: center;
             margin-right:5px;
             color: #ffffff;
         }
         #playlist-name-selection{
-            grid-column:3;
+            grid-column:2;
             grid-row:1;
             justify-self:start;
             align-self: center;
         }
         #playlist-add-button{
-            grid-column:4;
+            grid-column:3;
             grid-row:1;
             align-self: center;
             padding-left: 10px;
             padding-right: 10px;
         }
         #item-selection-reset{
-            grid-column:5;
+            grid-column:4;
             grid-row:1;
             align-self: center;
             justify-self:start;