Layout stuff

apps/hanabi.css

@@ -1,6 +1,5 @@
 .hanabi {
     padding-top: 3em;
-    grid-area: media;
     margin: 0 auto;
     width: 40vh;
 }

pico.css

@@ -7,7 +7,7 @@ body {
     grid-template-areas:
         'posts online'
         'actions actions'
-        'media media'
+        'tabbed-area tabbed-area'
     ;
     grid-template-columns: 1fr auto;
     grid-template-rows: 140px auto 1fr;
@@ -53,7 +53,6 @@ body {
     resize: none;
 }
 .media {
-    grid-area: media;
     display: grid;
     grid-template-rows: auto 1fr;
 }
@@ -116,12 +115,16 @@ body {
     width: unset;
     height: unset;
 }
+.tabbed-area {
+    grid-area: tabbed-area;
+    grid-template-columns: 1fr 1fr;
+}
 @media only screen and (min-width: 800px) {
     .chat {
         grid-template-areas:
-            'online media'
-            'posts media'
-            'actions media'
+            'online tabbed-area'
+            'posts tabbed-area'
+            'actions tabbed-area'
         ;
         grid-template-columns: 320px 1fr;
         grid-template-rows: auto 1fr auto;

pico.js

@@ -38,7 +38,7 @@ State.unseen = 0
 listen('post', () => {State.unseen += !document.hasFocus(); updateTitle()})
 listen('focus', () => {State.unseen = 0; updateTitle()})
 const updateTitle = () => {
-    document.title = `pico.chat` + (State.unseen ? ` (${State.unseen})` : ``)
+    document.title = location.href.split('//')[1] + (State.unseen ? ` (${State.unseen})` : ``)
 }
 
 /*
@@ -410,9 +410,10 @@ const Chat = {
                     ),
                 )),
             ),
-            /* we could make these into like tabs .... */
-            // m(Media),
-            m(Hanabi),
+            m('.tabbed-area',
+                m(Media),
+                m(Hanabi),
+            ),
         )
     },
 }