Keep chat headers and composers pinned without page scrolling

1 files changed, 17 insertions, 10 deletions

diff --git a/src/style.css b/src/style.css
index 2a0a4ba..fc1f384 100644
--- a/src/style.css
+++ b/src/style.css
@@ -403,21 +403,28 @@ hr.divider { margin: 16px 0; }
 .sel-ico svg { display: block; }
 
 /* Messages — Concord community chat. */
-/* The composer must never be below the fold. The card is sized to the
-   viewport and the message log is the only part that flexes, so opening the
-   invite or member panel shrinks the scroll area instead of pushing the input
-   off the bottom of the screen. The subtracted space is what sits around the
-   card: #app's padding plus the brand header and its gap. */
+/* An open conversation fills the window. Its header and composer stay put;
+   only the message log scrolls. Let flex layout account for the brand header
+   and padding instead of subtracting a fixed estimate from the viewport. */
+html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
+#app:has(.chat-card) {
+  height: 100vh;
+  height: var(--chat-viewport-height, 100dvh);
+  min-height: 0;
+}
+#app:has(.chat-card) > .footer { display: none; }
+#app > .col:has(> .chat-card) { flex: 1; min-height: 0; }
+#app > .col:has(> .chat-card) > :not(.chat-card) { flex-shrink: 0; }
 .chat-card {
   padding: 0; overflow: hidden; display: flex; flex-direction: column;
-  height: calc(100vh - 144px); max-height: calc(100vh - 144px);
-  height: calc(100dvh - 144px); max-height: calc(100dvh - 144px);
-  min-height: 320px;
+  flex: 1; min-height: 0;
 }
+.chat-card > :not(.chat-log) { flex-shrink: 0; }
+.chat-card > :is(.chat-invite, .chat-members) { flex-shrink: 1; min-height: 0; }
 .chat-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
 .chat-title { font-weight: 650; }
 .chat-log {
-  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px;
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 12px 14px;
   display: flex; flex-direction: column; gap: 10px; background: var(--surface2);
 }
 .chat-row { display: flex; gap: 9px; align-items: flex-start; }
@@ -1106,7 +1113,7 @@ body::after {
    vertical room the footer needs by tightening the frame, not the content. */
 @media (max-height: 620px) {
   #app { padding-top: 12px; padding-bottom: 12px; }
-  .card { padding: 16px; }
+  .card:not(.chat-card) { padding: 16px; }
   .profile-banner { margin: -16px -16px 0; }
   .footer { padding-top: 14px; padding-bottom: 0; }
   .tabs { margin: 10px 0; }