Skip to content

Fix UI Text Overflow Issues #415

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
google-labs-jules wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix UI Text Overflow Issues #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function Chat({ id }: ChatProps) {
useEffect(() => {
// Check if device is mobile
const checkMobile = () => {
setIsMobile(window.innerWidth < 768)
setIsMobile(window.innerWidth < 1024)
}

// Initial check
Expand Down
2 changes: 1 addition & 1 deletion components/copilot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
}
/>
<label
className="text-sm whitespace-nowrap pr-4"
className="text-sm pr-4"
htmlFor={option?.value}
>
{option?.label}
Expand Down
16 changes: 12 additions & 4 deletions components/settings/components/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,18 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
<div className="space-y-6">
<Tabs.Root value={currentTab} onValueChange={setCurrentTab} className="w-full">
<Tabs.List className="grid w-full grid-cols-4 gap-x-2">
<Tabs.Trigger value="system-prompt" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">System Prompt</Tabs.Trigger>
<Tabs.Trigger value="model" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Model Selection</Tabs.Trigger>
<Tabs.Trigger value="user-management" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">User Management</Tabs.Trigger>
<Tabs.Trigger value="map" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Map</Tabs.Trigger>
<Tabs.Trigger value="system-prompt" asChild>
<Button variant="outline" className="data-[state=active]:bg-primary/80">System Prompt</Button>
</Tabs.Trigger>
<Tabs.Trigger value="model" asChild>
<Button variant="outline" className="data-[state=active]:bg-primary/80">Model Selection</Button>
</Tabs.Trigger>
<Tabs.Trigger value="user-management" asChild>
<Button variant="outline" className="data-[state=active]:bg-primary/80">User Management</Button>
</Tabs.Trigger>
<Tabs.Trigger value="map" asChild>
<Button variant="outline" className="data-[state=active]:bg-primary/80">Map</Button>
</Tabs.Trigger>
Comment on lines 154 to +167
Copy link

@charliecreates charliecreates bot Jan 10, 2026

Choose a reason for hiding this comment

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

Using Tabs.Trigger asChild with your shared Button is a good consolidation, but be careful with styling: Button variant="outline" has its own hover/background/text rules that may conflict with the visual intent of an active tab.

Right now you only set data-[state=active]:bg-primary/80 but not the corresponding text color/border color. Depending on theme variables, this can yield low-contrast text or an outline border that looks incorrect when active.

Suggestion

Consider fully defining the active state styling (bg + text + border) to avoid theme-dependent contrast issues, e.g.:

<Button
  variant="outline"
  className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-primary"
>
  …
</Button>

If you want the inactive state to remain outlined, keep variant="outline" and only override the active state.

Reply with "@CharlieHelps yes please" if you'd like me to add a commit applying consistent active styles to all four triggers.

</Tabs.List>
<AnimatePresence mode="wait">
<motion.div
Expand Down
2 changes: 1 addition & 1 deletion components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
Comment on lines 7 to 9
Copy link

@charliecreates charliecreates bot Jan 10, 2026

Choose a reason for hiding this comment

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

Removing whitespace-nowrap from the base Button affects every button in the app, not just the ones that were overflowing. That’s a broad behavior change and may introduce regressions (e.g., buttons in tight toolbars or tables wrapping to two lines and increasing row height).

Given the PR goal (fix specific overflow cases), consider scoping wrapping behavior to the few problem buttons (or introducing an opt-in/out class/variant) rather than changing the global default.

Suggestion

Consider keeping the default as whitespace-nowrap and adding a variant/utility for wrapping, e.g.:

const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap ...',
  {
    variants: {
      wrap: {
        true: 'whitespace-normal break-words',
        false: 'whitespace-nowrap',
      },
      // ...
    },
    defaultVariants: {
      wrap: false,
    },
  }
)

Then apply wrap (or className="whitespace-normal") only where needed.

Reply with "@CharlieHelps yes please" if you'd like me to add a commit implementing this variant and updating the affected call sites.

variants: {
variant: {
Expand Down