From 1d6464b79b073c649631c0dffdd63d309e8f557a Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Tue, 29 Sep 2020 17:13:03 -0700
Subject: [PATCH] Let #right be fixed.

Previously, then the tags list was very long and dominated the scroll
height of the page, the #right and thus the photo would be floating
halfway down the page. By making it sticky, the photo always occupies
the correct position in the viewport no matter how long #left gets.
---
 .../etiquette_flask/templates/photo.html      | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index 7d3d78b..5eef3e3 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -36,7 +36,6 @@
 #right
 {
     display: grid;
-    position: relative;
     grid-template: "viewer" 1fr / 1fr;
 }
 #editor_area
@@ -98,8 +97,8 @@
 #hovering_tools
 {
     position: absolute;
-    right: 8px;
-    top: 8px;
+    right: 0px;
+    top: 0px;
 
     display: flex;
     flex-direction: column;
@@ -114,6 +113,16 @@
             "left right" 1fr
             / 310px 1fr;
     }
+    #right
+    {
+        position: fixed;
+        /* header=18 + 8px body top margin + 8px header/body gap = 34 */
+        top: 34px;
+        bottom: 8px;
+        right: 8px;
+        /* left=310px + 8px body left margin + 8px left/right gap = 326 */
+        left: 326px;
+    }
 }
 
 @media screen and (max-width: 800px)
@@ -125,6 +134,10 @@
             "left" max-content
             / 1fr;
     }
+    #right
+    {
+        position: relative;
+    }
 }
 </style>
 </head>