From b929998eda2dcf40384497e154f4290f0fdb8fff Mon Sep 17 00:00:00 2001
From: Dhamari Trice-Hanson <39872667+dhamariT@users.noreply.github.com>
Date: Wed, 1 Jul 2026 13:07:31 -0400
Subject: [PATCH] Fix composer toolbar: time-warning overlapping the Post
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In a narrow composer/modal (e.g. the devlog composer opened from a
project page), the time-tracking status line ('Timelapse for at least
15m before devlogging (currently 0m logged)') overran and overlapped the
Post button.

Cause: the toolbar is justify-content: space-between with two children —
the tools side (which holds the status line, nested info-wrap > info >
turbo-frame > span) and the submit group (IDV badge + Post). Neither side
could shrink (submit had no flex-shrink guard; the info nesting broke the
min-width:0 shrink chain), so a wrapped/long status line pushed the tools
side wide enough to sit under the submit group.

Fix: let the tools side yield and its status line wrap, and pin the
submit group at full size:
- feed-composer__tools: min-width: 0
- feed-composer__submit-group: flex-shrink: 0
- feed-composer__info: min-width: 0
- feed-composer__info-text: overflow-wrap: anywhere

Verified before/after across modal widths (720/780/840px): the Post
button stays cleanly separated at every width.
---
 app/assets/stylesheets/components/_feed.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/assets/stylesheets/components/_feed.scss b/app/assets/stylesheets/components/_feed.scss
index 4d1daab9d..24d6fb5ce 100644
--- a/app/assets/stylesheets/components/_feed.scss
+++ b/app/assets/stylesheets/components/_feed.scss
@@ -451,6 +451,9 @@
     display: flex;
     align-items: center;
     gap: var(--space-xxs);
+    // Let the tools side (which holds the time-status text) shrink and wrap
+    // instead of overrunning the submit group in a narrow composer/modal.
+    min-width: 0;
   }
 
   // Unverified `!` warning sits just left of the Post button.
@@ -458,6 +461,8 @@
     display: flex;
     align-items: center;
     gap: var(--space-xs);
+    // Keep the Post button + IDV badge at full size; the tools side gives first.
+    flex-shrink: 0;
   }
 
   &__tool-btn {
@@ -576,6 +581,9 @@
     display: flex;
     align-items: center;
     gap: var(--space-xs);
+    // Allow the status/warning line to wrap within the shrunk tools side
+    // rather than pushing the toolbar wider than its container.
+    min-width: 0;
 
     &[hidden] {
       display: none;
@@ -585,6 +593,7 @@
   &__info-text {
     font-size: calc(var(--font-size-s) * 1.2);
     color: var(--color-space-text-muted);
+    overflow-wrap: anywhere;
 
     &--warn {
       color: var(--color-brand-salmon);