Expand preview media support

server/public/styles.css

@@ -731,6 +731,82 @@
   white-space: pre;
 }
 
+.u-nav .preview-rendered,
+.u-nav .preview-table-wrap,
+.u-nav .preview-media,
+.u-nav .preview-frame {
+  min-height: 0;
+}
+
+.u-nav .preview-rendered {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow: auto;
+  padding: 12px;
+}
+
+.u-nav .preview-rendered h1,
+.u-nav .preview-rendered h2,
+.u-nav .preview-rendered h3,
+.u-nav .preview-rendered p,
+.u-nav .preview-rendered ul {
+  margin-top: 0;
+}
+
+.u-nav .preview-rendered code {
+  background: var(--surface-2);
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  padding: 1px 4px;
+}
+
+.u-nav .preview-table-wrap {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow: auto;
+}
+
+.u-nav .preview-table {
+  border-collapse: collapse;
+  min-width: 100%;
+}
+
+.u-nav .preview-table td {
+  border-bottom: 1px solid var(--line);
+  border-right: 1px solid var(--line);
+  padding: 6px 8px;
+  white-space: nowrap;
+}
+
+.u-nav .preview-media {
+  align-items: center;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+  padding: 10px;
+}
+
+.u-nav .preview-media img,
+.u-nav .preview-media video {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.u-nav .preview-media audio {
+  width: min(100%, 560px);
+}
+
+.u-nav .preview-frame {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  height: 100%;
+  width: 100%;
+}
+
 @media (max-width: 720px) {
   .u-nav .topbar {
     align-items: flex-start;