styles share

packages/web/src/components/Share.tsx

@@ -437,10 +437,29 @@ export default function Share(props: { api: string }) {
       <div class={styles.header}>
         <div data-section="title">
           <h1>{store.info?.title}</h1>
-          <p>
-            <span data-status={connectionStatus()[0]}>&#9679;</span>
-            <span data-element-label>{getStatusText(connectionStatus())}</span>
-          </p>
+          <div>
+            <div data-section="date">
+              {messages().length > 0 && messages()[0].metadata?.time.created ? (
+                <span
+                  title={DateTime.fromMillis(
+                    messages()[0].metadata?.time.created || 0,
+                  ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
+                >
+                  {DateTime.fromMillis(
+                    messages()[0].metadata?.time.created || 0,
+                  ).toLocaleString(DateTime.DATE_MED)}
+                </span>
+              ) : (
+                <span data-element-label data-placeholder>
+                  Started at &mdash;
+                </span>
+              )}
+            </div>
+            <p data-section="status">
+              <span data-status={connectionStatus()[0]}>&#9679;</span>
+              <span data-element-label>{getStatusText(connectionStatus())}</span>
+            </p>
+          </div>
         </div>
         <div data-section="row">
           <ul data-section="stats">
@@ -496,23 +515,6 @@ export default function Share(props: { api: string }) {
               </li>
             )}
           </ul>
-          <div data-section="date">
-            {messages().length > 0 && messages()[0].metadata?.time.created ? (
-              <span
-                title={DateTime.fromMillis(
-                  messages()[0].metadata?.time.created || 0,
-                ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
-              >
-                {DateTime.fromMillis(
-                  messages()[0].metadata?.time.created || 0,
-                ).toLocaleString(DateTime.DATE_MED)}
-              </span>
-            ) : (
-              <span data-element-label data-placeholder>
-                Started at &mdash;
-              </span>
-            )}
-          </div>
         </div>
       </div>
 

packages/web/src/components/share.module.css

@@ -64,6 +64,52 @@
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: flex-end;
+
+      [data-section="date"] {
+        span {
+          font-size: 0.875rem;
+          color: var(--sl-color-text-secondary);
+
+          &[data-placeholder] {
+            color: var(--sl-color-text-dimmed);
+          }
+        }
+      }
+
+      p[data-section="status"] {
+        flex: 0 0 auto;
+        display: flex;
+        gap: 0.375rem;
+        font-size: 0.75rem;
+
+        span:first-child {
+          color: var(--sl-color-divider);
+
+          &[data-status="connected"] {
+            color: var(--sl-color-green);
+          }
+          &[data-status="connecting"] {
+            color: var(--sl-color-orange);
+          }
+          &[data-status="disconnected"] {
+            color: var(--sl-color-divider);
+          }
+          &[data-status="reconnecting"] {
+            color: var(--sl-color-orange);
+          }
+          &[data-status="error"] {
+            color: var(--sl-color-red);
+          }
+        }
+      }
+
+    }
   }
 
   [data-section="row"] {
@@ -82,32 +128,6 @@
     -webkit-line-clamp: 2;
     overflow: hidden;
   }
-  p {
-    flex: 0 0 auto;
-    display: flex;
-    gap: 0.375rem;
-    font-size: 0.75rem;
-
-    span:first-child {
-      color: var(--sl-color-divider);
-
-      &[data-status="connected"] {
-        color: var(--sl-color-green);
-      }
-      &[data-status="connecting"] {
-        color: var(--sl-color-orange);
-      }
-      &[data-status="disconnected"] {
-        color: var(--sl-color-divider);
-      }
-      &[data-status="reconnecting"] {
-        color: var(--sl-color-orange);
-      }
-      &[data-status="error"] {
-        color: var(--sl-color-red);
-      }
-    }
-  }
 
   [data-section="stats"] {
     list-style-type: none;
@@ -147,17 +167,6 @@
       }
     }
   }
-
-  [data-section="date"] {
-    span {
-      font-size: 0.875rem;
-      color: var(--sl-color-text);
-
-      &[data-placeholder] {
-        color: var(--sl-color-text-dimmed);
-      }
-    }
-  }
 }
 
 .parts {