Add explicit @media queries for wide mode, not just default to override.

Any properties that are different in wide/narrow mode should be defined
in the correct media query. I got tired of having wide mode be the
default and then narrow mode having to unset/initial all the attributes
that aren't relevant to narrow.

frontends/etiquette_flask/static/css/common.css

@@ -120,6 +120,9 @@ pre
     grid-auto-rows: min-content;
     grid-gap: 8px;
 
+    /*
+    8px all around except the top, where the header already has a margin.
+    */
     margin: 8px;
     margin-top: 0;
 }

frontends/etiquette_flask/templates/clipboard.html

@@ -19,18 +19,10 @@
     <script src="/static/js/tag_autocomplete.js"></script>
 
 <style>
-#left
-{
-    word-break: break-word;
-}
 #right
 {
     display: grid;
     grid-row-gap: 8px;
-    grid-template:
-        "toolbox" auto
-        "message_area" 1fr
-        / 1fr;
     padding: 8px;
     background-color: var(--color_transparency);
 }
@@ -70,6 +62,17 @@
     flex: initial;
 }
 
+@media screen and (min-width: 800px)
+{
+    #right
+    {
+        grid-template:
+            "toolbox" auto
+            "message_area" 1fr
+            / 1fr;
+    }
+}
+
 @media screen and (max-width: 800px)
 {
     #right

frontends/etiquette_flask/templates/login.html

@@ -24,10 +24,6 @@ button
 #content_body
 {
     margin: auto;
-    grid-template:
-        "login_form register_form" auto
-        "message_area message_area" 150px
-        / 1fr 1fr;
 }
 
 form
@@ -48,6 +44,17 @@ form h2
     grid-area: message_area;
 }
 
+@media screen and (min-width: 800px)
+{
+    #content_body
+    {
+        grid-template:
+            "login_form register_form" auto
+            "message_area message_area" 150px
+            / 1fr 1fr;
+    }
+}
+
 @media screen and (max-width: 800px)
 {
     #content_body

frontends/etiquette_flask/templates/photo.html

@@ -20,9 +20,6 @@
 #content_body
 {
     flex: 1;
-    grid-template:
-        "left right" 1fr
-        / 310px 1fr;
 }
 #left
 {
@@ -57,7 +54,6 @@
 {
     grid-area: message_area;
     min-height: 30px;
-    max-height: none;
     margin: 8px;
 }
 #photo_viewer
@@ -110,6 +106,16 @@
     align-items: flex-end;
 }
 
+@media screen and (min-width: 800px)
+{
+    #content_body
+    {
+        grid-template:
+            "left right" 1fr
+            / 310px 1fr;
+    }
+}
+
 @media screen and (max-width: 800px)
 {
     #content_body
@@ -119,17 +125,6 @@
             "left" max-content
             / 1fr;
     }
-    #left
-    {
-        width: initial;
-        max-width: none;
-    }
-    #message_area
-    {
-        flex: 2;
-        height: initial;
-        max-height: none;
-    }
 }
 </style>
 </head>

frontends/etiquette_flask/templates/search.html

@@ -28,14 +28,6 @@
     justify-content: center;
 }
 
-#content_body
-{
-    grid-template:
-        "left error_message_area" auto
-        "left happy_message_area" auto
-        "left right" 1fr
-        / 310px 1fr;
-}
 #error_message_area
 {
     grid-area: error_message_area;
@@ -85,21 +77,32 @@
     /* Keep the prev-next buttons from scraping the floor */
     padding-bottom: 30px;
 }
-@media screen and (max-width: 800px) {
+
+@media screen and (min-width: 800px)
+{
     #content_body
     {
         grid-template:
-            "error_message_area"
+            "left error_message_area" auto
-            "happy_message_area"
+            "left happy_message_area" auto
-            "right"
+            "left right" 1fr
-            "left";
+            / 310px 1fr;
     }
-    #left
+}
+
+@media screen and (max-width: 800px)
 {
-        max-width: none;
+    #content_body
-        width: initial;
+    {
+        grid-template:
+            "error_message_area" auto
+            "happy_message_area" auto
+            "right" auto
+            "left" auto
+            / auto;
     }
 }
+
 .prev_next_holder
 {
     display: flex;

frontends/etiquette_flask/templates/tags.html

@@ -53,9 +53,6 @@ h2, h3
 #right
 {
     display: grid;
-    grid-template:
-        "editor_area" 1fr
-        "message_area" 1fr;
     padding: 8px;
     background-color: var(--color_transparency);
 }
@@ -68,6 +65,17 @@ h2, h3
 {
     grid-area: message_area;
 }
+
+@media screen and (min-width: 800px)
+{
+    #right
+    {
+        grid-template:
+            "editor_area" 1fr
+            "message_area" 1fr;
+    }
+}
+
 @media screen and (max-width: 800px)
 {
     #right