[ENG-2305] Replace JavaScript resize detection with Tailwind responsive utilities #753

K-Mistele · 2025-10-16T00:19:07Z

What problem(s) was I solving?

The SessionDetail component (specifically ActiveSession) was using JavaScript-based resize detection to switch between responsive layouts. This approach had several drawbacks:

Performance overhead: Window resize listeners fire continuously during resize operations, causing unnecessary React re-renders
SSR incompatibility: The isWideView state initializes to false and then updates on mount, potentially causing hydration mismatches
Code complexity: ~15 lines of JavaScript code managing state and event listeners for something CSS can handle natively
Delayed responsiveness: JavaScript-based detection has a slight lag compared to native CSS media queries

What user-facing changes did I ship?

No visible user-facing changes. The responsive behavior remains identical:

TodoWidget sidebar appears at exactly 1024px width (same as before)
Layout switches between single column (mobile) and two column (desktop) at the same breakpoint
80/20 width split maintained using Tailwind's fractional width utilities (lg:w-1/5 = 20%)

How I implemented it

The refactoring involved three main phases:

1. Core Refactoring

Removed the isWideView state variable and its associated useState hook
Removed the resize event listener and its useEffect cleanup logic
Replaced JavaScript-based conditional classes with Tailwind responsive utilities:
- Layout container: Changed from ${isWideView ? 'flex-row' : 'flex-col'} to flex-col lg:flex-row
- TodoWidget: Changed from {isWideView && ...} conditional rendering to CSS visibility using hidden lg:flex lg:w-1/5

2. Documentation

Added a "Responsive Design Patterns" section to humanlayer-wui/CLAUDE.md
Documented Tailwind breakpoint usage across the codebase
Provided implementation examples for future developers

3. Code Quality

Ran Prettier formatting to ensure consistent code style
All existing tests continue to pass without modification

How to verify it

Automated Verification

make check test - All checks and tests pass

Manual Testing

To verify the responsive behavior works correctly:

Open any session with TodoWrite events in the SessionDetail view
Resize your browser window around the 1024px breakpoint
Verify:
- TodoWidget appears at exactly 1024px width
- TodoWidget disappears below 1024px width
- Layout switches smoothly from horizontal to vertical
- No visual jumps or flickers during resize
- No console errors or React warnings

Description for the changelog

refactor: Replace JavaScript resize detection with Tailwind responsive utilities in SessionDetail

Eliminated state-based responsive layout in ActiveSession component in favor of pure CSS media queries using Tailwind's lg: breakpoint (1024px). This removes resize event listeners, reduces React re-renders, and improves SSR compatibility while maintaining identical responsive behavior.

Important

Refactor ActiveSession to use Tailwind CSS for responsive design, removing JavaScript resize detection.

Behavior:
- Removed isWideView state and associated useState hook in ActiveSession.
- Removed resize event listener and useEffect cleanup logic in ActiveSession.
- Replaced JavaScript-based conditional classes with Tailwind utilities in ActiveSession.
Documentation:
- Added "Responsive Design Patterns" section to CLAUDE.md.
- Documented Tailwind breakpoint usage and provided examples.
Code Quality:
- Ran Prettier for consistent code style.
- All tests pass without modification.

^{This description was created by}^{for 0dc5bb8. You can customize this summary. It will automatically update as commits are pushed.}

…e utilities in ActiveSession Remove state-based responsive layout in favor of pure CSS media queries using Tailwind's lg: breakpoint (1024px). This eliminates resize event listeners, reduces React re-renders, and improves SSR compatibility. Changes: - Remove isWideView state and window resize listener - Use Tailwind's lg:flex-row for responsive layout switching - Apply hidden lg:flex pattern for TodoWidget visibility - Change width from w-[20%] to lg:w-1/5 for consistency

Document Tailwind responsive patterns in CLAUDE.md to guide future development. The pattern eliminates JavaScript resize listeners in favor of pure CSS media queries. Changes: - Add responsive design patterns section to CLAUDE.md - Document breakpoint usage and SessionDetail example - Format code with Prettier (removed extra blank line)

ellipsis-dev

Important

Looks good to me! 👍

Reviewed everything up to 5de891e in 46 seconds. Click for details.

Reviewed 95 lines of code in 2 files
Skipped 0 files when reviewing.
Skipped posting 4 draft comments. View those below.
Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. humanlayer-wui/CLAUDE.md:63

Draft comment:
Clear documentation update on using Tailwind responsive utilities for breakpoints. This is helpful for future reference.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

2. humanlayer-wui/src/components/internal/SessionDetail/components/ActiveSession.tsx:239

Draft comment:
Good removal of JS-based resize detection. Relying on Tailwind's CSS media queries reduces complexity and improves SSR compatibility.
Reason this comment was not posted:
Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative, praising the removal of JS-based resize detection and the use of Tailwind's CSS media queries. It doesn't provide any actionable feedback or suggestions for improvement.

3. humanlayer-wui/src/components/internal/SessionDetail/components/ActiveSession.tsx:804

Draft comment:
Replacing conditional class logic with Tailwind's responsive classes ('flex-col lg:flex-row') simplifies the layout logic.
Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.

4. humanlayer-wui/src/components/internal/SessionDetail/components/ActiveSession.tsx:874

Draft comment:
Using 'hidden lg:flex lg:w-1/5' for the TodoWidget Card cleanly hides it on smaller screens while displaying it on desktop. Looks appropriate.
Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_UzTXanoynAwRGJng

^{You can customize}^{by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

… code" This reverts commit 5de891e.

ellipsis-dev

Important

Looks good to me! 👍

Reviewed d6fed8f in 37 seconds. Click for details.

Reviewed 51 lines of code in 2 files
Skipped 0 files when reviewing.
Skipped posting 2 draft comments. View those below.
Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. humanlayer-wui/CLAUDE.md:59

Draft comment:
Removed responsive design documentation: This section provided valuable details (e.g., breakpoints and usage examples) supporting the Tailwind refactoring. Ensure that updated guidance is available elsewhere to aid future developers.
Reason this comment was not posted:
Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative and suggests ensuring that updated guidance is available elsewhere, which violates the rules. It doesn't provide a specific code suggestion or ask for a specific test to be written.

2. humanlayer-wui/src/components/internal/SessionDetail/components/ActiveSession.tsx:238

Draft comment:
Unnecessary blank line added; consider removing it to preserve consistent formatting.
Reason this comment was not posted:
Confidence changes required: 10% <= threshold 50% None

Workflow ID: wflow_pW4gtWmplg0Rwavs

^{You can customize}^{by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

ellipsis-dev

Important

Looks good to me! 👍

Reviewed 0dc5bb8 in 27 seconds. Click for details.

Reviewed 12 lines of code in 1 files
Skipped 0 files when reviewing.
Skipped posting 1 draft comments. View those below.
Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. humanlayer-wui/src/components/internal/SessionDetail/components/ActiveSession.tsx:238

Draft comment:
Removed an unnecessary blank line improves code consistency. This change is stylistic and aligns with Prettier formatting.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

Workflow ID: wflow_5uqCVdtn6jZvA6X8

^{You can customize}^{by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

K-Mistele added 2 commits October 15, 2025 17:15

ellipsis-dev bot reviewed Oct 16, 2025

View reviewed changes

Revert "docs: Add responsive design patterns documentation and format…

d6fed8f

… code" This reverts commit 5de891e.

ellipsis-dev bot reviewed Oct 16, 2025

View reviewed changes

K-Mistele requested a review from balanceiskey October 16, 2025 00:27

fix: prettiergs

0dc5bb8

ellipsis-dev bot reviewed Oct 16, 2025

View reviewed changes

dexhorthy approved these changes Oct 16, 2025

View reviewed changes

balanceiskey approved these changes Oct 16, 2025

View reviewed changes

K-Mistele merged commit a78c3fc into main Oct 16, 2025
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[ENG-2305] Replace JavaScript resize detection with Tailwind responsive utilities #753

[ENG-2305] Replace JavaScript resize detection with Tailwind responsive utilities #753

Uh oh!

K-Mistele commented Oct 16, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

ellipsis-dev bot left a comment

Uh oh!

ellipsis-dev bot left a comment

Uh oh!

ellipsis-dev bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[ENG-2305] Replace JavaScript resize detection with Tailwind responsive utilities #753

[ENG-2305] Replace JavaScript resize detection with Tailwind responsive utilities #753

Uh oh!

Conversation

K-Mistele commented Oct 16, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What problem(s) was I solving?

What user-facing changes did I ship?

How I implemented it

1. Core Refactoring

2. Documentation

3. Code Quality

How to verify it

Automated Verification

Manual Testing

Description for the changelog

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

K-Mistele commented Oct 16, 2025 •

edited by ellipsis-dev bot

Loading