feat: mobile/narrow-viewport layout via @media (max-width: 700px)#61
Open
hkrathore wants to merge 1 commit into
Open
feat: mobile/narrow-viewport layout via @media (max-width: 700px)#61hkrathore wants to merge 1 commit into
hkrathore wants to merge 1 commit into
Conversation
Adds a single @media block at the bottom of static/style.css so phones and narrow tabs get a usable layout without a JS breakpoint framework. Adjustments at ≤700px: - tighten header/footer padding and shrink h1 to 15px - hide decorative labels (.discord-pill, .subtitle, .sender-label, .input-hint) that waste horizontal space - cap #agent-status at 42vw so a long agent list doesn't push the settings button off-screen - shrink .status-pill and .settings-btn paddings - reduce #timeline and .message padding so chat bubbles have more width - constrain .chat-bubble to 100vw - 76px (leaves room for avatar + gutter) - compress the input row: gap 6px, smaller mic/send horizontal padding No behavior change above 700px. Desktop styling is untouched.
hkrathore
added a commit
to hkrathore/agentchattr
that referenced
this pull request
Apr 21, 2026
Prior merges auto-resolved style.css in a way that preserved duplicate rule sets from old and new upstream versions, leaving ~1200 lines of dead/redundant CSS and 8 same-selector duplicates beyond upstream's own. Rebases this file on upstream/main's canonical version and re-appends the clean @media (max-width: 700px) block (same as PR bcurts#61). No intended local CSS beyond the mobile block; confirmed by diffing upstream..main and seeing only the @media region as a meaningful divergence, everything else being duplicated upstream snippets.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a single
@media (max-width: 700px)block at the end ofstatic/style.cssso phones and narrow tabs get a usable layout without introducing a JS breakpoint framework. No behavior change above 700px.Motivation
The desktop layout is great but falls apart on a phone: decorative labels push the input off-screen, agent-status can cover the settings button when there are a lot of agents, and chat bubbles run edge-to-edge with no breathing room. I've been using this block against a Tailscale-exposed instance from my phone and it's the minimum that makes the app feel right on mobile.
What changed
static/style.css— one new@media (max-width: 700px)block, 75 lines, appended at the end. Adjustments:.discord-pill,.subtitle,.sender-label,.input-hint) that waste horizontal space#agent-statuscapped at42vwso a long agent list can't push the settings button off-screen.status-pill/.settings-btnshrunk a notchmain#timeline/.messagepadding reduced for more bubble width.chat-bubbleconstrained to100vw - 76px(leaves room for avatar + gutter)gap: 6px, smaller mic/send horizontal paddingTest plan
static/index.html+static/chat.js+static/style.css) — all targets exist