Add --narrow, --wide to common.css, is_wide_mode to common.js.

frontends/etiquette_flask/static/css/common.css

@@ -12,6 +12,22 @@
     --color_highlight: rgba(255, 255, 255, 0.5);
 }
 
+@media screen and (min-width: 800px)
+{
+    :root
+    {
+        --wide: 1;
+    }
+}
+
+@media screen and (max-width: 800px)
+{
+    :root
+    {
+        --narrow: 1;
+    }
+}
+
 .hidden
 {
     display: none !important;

frontends/etiquette_flask/static/js/common.js

@@ -453,6 +453,18 @@ function init_all_tabbed_container()
     }
 }
 
+common.is_narrow_mode =
+function is_narrow_mode()
+{
+    return getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() === "1";
+}
+
+common.is_wide_mode =
+function is_wide_mode()
+{
+    return getComputedStyle(document.documentElement).getPropertyValue("--wide").trim() === "1";
+}
+
 common.tabbed_container_switcher =
 function tabbed_container_switcher(event)
 {

frontends/etiquette_flask/templates/photo.html

@@ -19,7 +19,6 @@
 <style>
 #content_body
 {
-    --narrow: 0;
     flex: 1;
     grid-template:
         "left right" 1fr
@@ -119,7 +118,6 @@
 {
     #content_body
     {
-        --narrow: 1;
         grid-template:
             "right" 100%
             "left" max-content
@@ -486,8 +484,7 @@ function toggle_hoverzoom(event)
     {
         enable_hoverzoom(event);
     }
-    const content_body = document.getElementById('content_body');
+    if (common.is_wide_mode())
-    if (getComputedStyle(content_body).getPropertyValue("--narrow") == 0)
     {
         add_tag_box.focus();
     }
@@ -566,8 +563,7 @@ function autofocus_add_tag_box()
     which is annoying. So, this function focuses the box manually as long as
     we're not narrow.
     */
-    const content_body = document.getElementById("content_body");
+    if (common.is_wide_mode())
-    if (getComputedStyle(content_body).getPropertyValue("--narrow") == 0)
     {
         add_tag_box.focus();
     }