Skip to content

Responsiveness improvements#4

Merged
ScriptSmith merged 3 commits intomainfrom
responsiveness-improvements
Mar 4, 2026
Merged

Responsiveness improvements#4
ScriptSmith merged 3 commits intomainfrom
responsiveness-improvements

Conversation

@ScriptSmith
Copy link
Owner

No description provided.

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Mar 4, 2026

Greptile Summary

This PR improves mobile responsiveness across the UI and documentation site by adding horizontal scrolling, flexible layouts, and responsive spacing. The changes primarily affect component widths, overflow behavior, and breakpoint-specific styling to ensure better display on small screens.

Key Changes:

  • Added horizontal scroll containers with scrollbar-none for mobile-friendly navigation (demo gallery tabs, model selector chips)
  • Implemented responsive heights and flexible widths using Tailwind utilities (basis-[min(500px,85vw)], responsive height classes)
  • Enhanced mobile UX with model count badges and smaller button sizes on mobile
  • Added "headless" profile option to quick-start selector with updated feature matrix
  • Removed max-width constraints from markdown components (may affect readability on large screens)
  • Removed hover preview functionality from demo gallery tabs

Non-Responsiveness Changes:

  • Added CLAUDE.md and AGENTS.md documentation files (681 lines) - not related to responsiveness improvements

Confidence Score: 4/5

  • This PR is generally safe to merge with some minor style considerations
  • The changes are well-implemented and focused on improving mobile responsiveness. Most modifications use standard responsive design patterns. However, removing max-width constraints from markdown components could negatively impact readability on large screens, and removing the hover preview feature is a minor UX regression. These are style/UX issues rather than functional bugs.
  • Pay attention to ui/src/components/Markdown/Markdown.tsx and ui/src/components/StreamingMarkdown/StreamingMarkdown.tsx - test markdown content display on large screens to ensure readability is maintained

Important Files Changed

Filename Overview
docs/app/(home)/page.tsx made demo gallery horizontally scrollable on mobile, added responsive heights, removed hover preview functionality
ui/src/components/Markdown/Markdown.tsx removed responsive max-width constraints which could impact readability on large screens
ui/src/components/ModelSelector/ModelSelector.tsx added mobile-only model count badge, made chip container horizontally scrollable on mobile with wrapping on desktop
ui/src/components/MultiModelResponse/MultiModelResponse.tsx changed model cards from fixed width to flexible responsive width using basis-[min(500px,85vw)] for better mobile display
ui/src/components/StreamingMarkdown/StreamingMarkdown.tsx removed responsive max-width constraints which could impact readability on large screens

Last reviewed commit: 5be0a9c

aria-selected={active === demo.id}
aria-controls={`demo-panel-${demo.id}`}
onMouseEnter={() => setActive(demo.id)}
onClick={() => setActive(demo.id)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed hover preview functionality - users could previously preview demos by hovering over tabs without clicking

Suggested change
onClick={() => setActive(demo.id)}
onMouseEnter={() => setActive(demo.id)}
onClick={() => setActive(demo.id)}
Prompt To Fix With AI
This is a comment left during a code review.
Path: docs/app/(home)/page.tsx
Line: 88

Comment:
removed hover preview functionality - users could previously preview demos by hovering over tabs without clicking

```suggestion
            onMouseEnter={() => setActive(demo.id)}
            onClick={() => setActive(demo.id)}
```

How can I resolve this? If you propose a fix, please make it concise.

className={cn(
"markdown-content prose prose-sm dark:prose-invert",
"max-w-[calc(100vw-8rem)] sm:max-w-[500px] md:max-w-[600px] lg:max-w-[700px]",
"max-w-none",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removing max-width constraints could make markdown content too wide on large screens, reducing readability - consider keeping a reasonable max-width (e.g., max-w-prose or max-w-4xl) for better typography

Prompt To Fix With AI
This is a comment left during a code review.
Path: ui/src/components/Markdown/Markdown.tsx
Line: 48

Comment:
removing max-width constraints could make markdown content too wide on large screens, reducing readability - consider keeping a reasonable max-width (e.g., `max-w-prose` or `max-w-4xl`) for better typography

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

className={cn(
"markdown-content prose prose-sm dark:prose-invert",
"max-w-[calc(100vw-8rem)] sm:max-w-[500px] md:max-w-[600px] lg:max-w-[700px]",
"max-w-none",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removing max-width constraints could make markdown content too wide on large screens, reducing readability - consider keeping a reasonable max-width (e.g., max-w-prose or max-w-4xl) for better typography

Prompt To Fix With AI
This is a comment left during a code review.
Path: ui/src/components/StreamingMarkdown/StreamingMarkdown.tsx
Line: 78

Comment:
removing max-width constraints could make markdown content too wide on large screens, reducing readability - consider keeping a reasonable max-width (e.g., `max-w-prose` or `max-w-4xl`) for better typography

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

@ScriptSmith ScriptSmith merged commit 42cf1f6 into main Mar 4, 2026
18 of 19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant