minor layout fixes to guestbook

guestbook/index.php

@@ -24,7 +24,7 @@
       }
 
       article {
-        width: 90%;
+        width: 100%;
         margin: 2rem auto;
         display: grid;
         gap: 1rem;
@@ -86,6 +86,9 @@
       .gb-index {
         text-align: right;
       }
+      .gb-name, .gb-date, .gb-index {
+        min-width: calc(var(--bodywidth) / 3);
+      }
       @media only screen and (hover: none) {
         form td:first-child {
           text-align: left;
@@ -100,26 +103,18 @@
           border-bottom: 2px solid #888888;
         }
         article {
-          width: 100%;
           margin: 2rem auto;
         }
-        article td:nth-child(2) {
-          text-align: left;
-        }
-        article td:last-child {
-          text-align: left;
-        }
-        article td:first-child {
-          text-align: left;
-        }
-        article {
-          grid-template-areas:
-            'gb-name gb-name gb-index'
-            'gb-date gb-date gb-date'
-            'gb-cool gb-cool gb-cool'
-            'gb-found gb-found gb-found'
-            'gb-message gb-message gb-message'
-            'gb-reply gb-reply gb-reply';
+        @media (max-width: 43rem) {
+          article {
+            grid-template-areas:
+              'gb-name gb-name gb-index'
+              'gb-date gb-date gb-date'
+              'gb-cool gb-cool gb-cool'
+              'gb-found gb-found gb-found'
+              'gb-message gb-message gb-message'
+              'gb-reply gb-reply gb-reply';
+          }
         }
       }
       @media (prefers-contrast: more) {
@@ -209,7 +204,7 @@
         $coolsanitized = htmlentities(preg_replace("/https?:\/\//i", "", $cool));
         $reply = htmlentities($post->reply);
 
-        $output = $output."<hr><article><div style='grid-area:gb-name;'>";
+        $output = $output."<hr><article><div style='grid-area:gb-name;' class='gb-name'>";
         if($website) { $output = $output."<a href='$website'>$name</a>"; }
         else { $output = $output.$name; }
         $output = $output."</div><div style='grid-area:gb-date;' class='gb-date'>$date</div><div style='grid-area:gb-index;' class='gb-index'>Entry #$index</div>";