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.

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>