Use less laggy grid layout strategy for watch page

1 files changed, 8 insertions, 13 deletions

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;