Release v0.1.3

webui/src/styles/auth-gate.css

@@ -13,7 +13,9 @@
 }
 
 .public-content {
-  min-height: calc(100vh - 64px);
+  min-height: 0;
+  overflow: auto;
+  height: 100%;
   background:
     radial-gradient(circle at 18% 18%, rgba(239, 107, 58, .13), transparent 24rem),
     radial-gradient(circle at 78% 14%, rgba(126, 166, 197, .15), transparent 22rem),

webui/src/styles/components.css

@@ -1092,6 +1092,16 @@
   gap: 5px;
 }
 
+.message-display-attachment-protection {
+  justify-items: end;
+  text-align: right;
+}
+.message-display-attachment-protection-note {
+  display: block;
+  max-width: 240px;
+  overflow-wrap: anywhere;
+}
+
 .message-display-headers summary {
   cursor: pointer;
   font-weight: 700;
@@ -1264,3 +1274,70 @@
 .unsaved-changes-actions {
   justify-content: flex-end;
 }
+
+.file-drop-zone {
+  display: grid;
+  place-items: center;
+  gap: 8px;
+  min-height: 170px;
+  border: 1px dashed var(--line-dark);
+  border-radius: 8px;
+  background: var(--panel-soft);
+  color: var(--muted);
+  text-align: center;
+  cursor: pointer;
+  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
+}
+.file-drop-zone:hover,
+.file-drop-zone:focus-visible,
+.file-drop-zone.is-active {
+  border-color: #0d6efd;
+  background: rgba(13, 110, 253, .08);
+}
+.file-drop-zone:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(13, 110, 253, .18);
+}
+.file-drop-zone[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: .65;
+}
+.file-drop-zone.is-busy {
+  border-color: #0d6efd;
+  background: rgba(13, 110, 253, .08);
+  cursor: progress;
+  opacity: 1;
+}
+.file-drop-progress {
+  --file-drop-progress: 0%;
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 58px;
+  height: 58px;
+  border-radius: 50%;
+  background: conic-gradient(#0d6efd var(--file-drop-progress), rgba(13, 110, 253, .16) 0);
+  color: var(--text-strong);
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+}
+.file-drop-progress::before {
+  content: "";
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  background: var(--panel-soft);
+  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .12);
+}
+.file-drop-progress > span {
+  position: relative;
+  z-index: 1;
+}
+.file-drop-progress.is-indeterminate {
+  background: conic-gradient(#0d6efd 0 32%, rgba(13, 110, 253, .16) 32% 100%);
+  animation: file-drop-progress-spin .85s linear infinite;
+}
+@keyframes file-drop-progress-spin {
+  to { transform: rotate(360deg); }
+}

webui/src/styles/dialogs.css

@@ -95,7 +95,7 @@
   gap: 1rem;
   padding: 14px 18px;
   border-bottom: 1px solid var(--line);
-  background: var(--bar, #f5f4f1);
+  background: var(--panel, #f7f6f4);
 }
 
 .dialog-title {
@@ -146,7 +146,7 @@
   gap: 0.6rem;
   padding: 12px 18px;
   border-top: 1px solid var(--line);
-  background: var(--bar, #f5f4f1);
+  background: var(--panel, #f7f6f4);
 }
 
 .confirm-dialog {

webui/src/styles/layout.css

@@ -1,5 +1,5 @@
-.app-shell { min-height: 100vh; display: grid; grid-template-columns: 58px 1fr; }
-.icon-rail { background: var(--rail-bg); color: #c7c6c0; display: flex; flex-direction: column; align-items: center; min-height: 100vh; box-shadow: inset -1px 0 rgba(0,0,0,.35); z-index: 1000; }
+.app-shell { height: 100vh; min-height: 0; display: grid; grid-template-columns: 58px 1fr; overflow: hidden; }
+.icon-rail { background: var(--rail-bg); color: #c7c6c0; display: flex; flex-direction: column; align-items: center; height: 100vh; min-height: 0; box-shadow: inset -1px 0 rgba(0,0,0,.35); z-index: 1000; }
 .brand-mark { width: 34px; height: 34px; margin: 15px 0 14px; border-radius: 50%; background: conic-gradient(#ef6b3a 0 20%, #f2c66d 0 40%, #80b9b0 0 60%, #7e9fc0 0 80%, #56545f 0); color: transparent; font-size: 0; position: relative; }
 .brand-mark::after { position: absolute;
   top: 9px;
@@ -13,7 +13,7 @@
 .icon-nav { width: 100%; display: flex; flex-direction: column; }
 .icon-nav-item { height: 52px; display: grid; place-items: center; color: #a7a49f; border-left: 3px solid transparent; text-decoration: none; }
 .icon-nav-item:hover, .icon-nav-item.active { background: var(--rail-bg-active); color: #fff; border-left-color: var(--accent); }
-.app-main { min-width: 0; display: grid; grid-template-rows: 64px 51px 1fr; min-height: 100vh; }
+.app-main { min-width: 0; min-height: 0; height: 100vh; display: grid; grid-template-rows: 64px 51px minmax(0, 1fr); }
 .titlebar { background: #fbfbfa; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 18px; gap: 36px; z-index: 100;  box-shadow: 0px 0px 10px 0px darkgrey; }
 .tenant-selector { height: 40px; min-width: 210px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; display: flex; align-items: center; padding: 0 12px; gap: 5px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.05); }
 .tenant-label, .tenant-caret, .muted { color: var(--muted); }
@@ -27,7 +27,8 @@
 .crumb { display: inline-flex; align-items: center; gap: 4px; }
 .breadcrumb-actions { margin-left: auto; display: flex; gap: 10px; }
 .ghost-button { border: 0; background: transparent; color: #77736d; font-weight: 700; }
-.workspace { height: calc(100vh - 112px); display: grid; grid-template-columns: 198px 1fr; }
+.app-content { min-height: 0; overflow: hidden; }
+.workspace { height: 100%; min-height: 0; display: grid; grid-template-columns: 198px minmax(0, 1fr); }
 .section-sidebar { background: #c8c4bf; border-right: 1px solid var(--line-dark); padding: 18px 0; border-left: 3px solid #afada9; box-shadow: 0px 0px 10px 0px darkgrey; z-index: 80; overflow-y: scroll; }
 .section-title { font-size: 12px; font-weight: 800; color: #7f7b75; padding: 0 22px 14px; letter-spacing: .06em; }
 .section-title-lower { margin-top: 28px; }
@@ -35,13 +36,13 @@
 .section-link:hover, .section-link.active { background: rgba(255,255,255,.35); color: #3e3e3f; }
 .section-link.active { border-left: 3px solid var(--accent); font-weight: 700; }
 .section-link.subtle { font-size: 13px; }
-.workspace-content { min-width: 0; max-width: 100%; overflow: auto; }
+.workspace-content { min-width: 0; max-width: 100%; min-height: 0; overflow: auto; }
 .content-pad { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 28px 34px; }
 .page-heading { margin-bottom: 22px; }
 .page-heading h1 { margin: 0; font-size: 26px; color: var(--text-strong); font-weight: 600; }
 .page-heading p { margin: 6px 0 0; color: var(--muted); }
 .page-heading.split { display: flex; align-items: center; justify-content: space-between; }
-.panel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: scroll; }
+.panel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
 .card-header { min-height: 56px; padding: 0 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; background: var(--panel-header); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
 .card-header h2 { margin: 0; font-size: 16px; color: var(--text-strong); }
 .card-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap;}

webui/src/styles/tokens.css

@@ -46,5 +46,6 @@
 }
 
 * { box-sizing: border-box; }
-body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); }
+html, body, #root { height: 100%; }
+body { margin: 0; overflow: hidden; font-family: var(--font); color: var(--text); background: var(--bg); }
 a { color: inherit; }