Skip to content

Fix UI overflow in Copilot and EmptyScreen components #511

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
ngoiyaeric wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix UI overflow in Copilot and EmptyScreen components #511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54aefe5
fix(ui): resolve text overflow in Copilot and EmptyScreen components
google-labs-jules[bot] Feb 9, 2026
2913b72
fix(ui): resolve text overflow and optimize mobile input space
google-labs-jules[bot] Feb 9, 2026
f71f4c5
fix(ui): eliminate redundant paddings in mobile chat input area
google-labs-jules[bot] Feb 9, 2026
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
12 changes: 6 additions & 6 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@
}

.mobile-icons-bar {
height: 60px;
height: 48px;
width: 100%;
background-color: hsl(var(--background));
border-top: 1px solid hsl(var(--border));
Expand All @@ -144,7 +144,7 @@

.mobile-icons-bar-content {
display: flex;
gap: 20px;
gap: 12px;
padding: 0 10px;
min-width: max-content;
/* justify-content: space-between; */
Expand All @@ -169,7 +169,7 @@
flex: 1;
width: 100%;
overflow-y: auto;
padding: 12px;
padding: 8px;
padding-bottom: 60px;
box-sizing: border-box;
background-color: hsl(var(--card));
Expand All @@ -180,7 +180,7 @@
.mobile-chat-messages-area {
flex: 1; /* Changed from height: 40vh to take available space */
overflow-y: auto;
padding: 12px;
padding: 8px;
background-color: hsl(var(--card));
color: hsl(var(--card-foreground));
box-sizing: border-box;
Expand All @@ -189,7 +189,7 @@

.mobile-chat-input-area {
height: auto;
padding: 10px;
padding: 2px;
background-color: hsl(var(--background));
/* border-top: 1px solid hsl(var(--border)); */ /* Removed for cleaner separation */
border-bottom: 1px solid hsl(var(--border)); /* Added for separation from messages area below */
Expand All @@ -205,7 +205,7 @@
/* left: 0; */ /* Handled by parent flex */
/* right: 0; */ /* Handled by parent flex */
width: 100%; /* Ensure it takes full width of its container */
padding: 10px;
padding: 0;
background-color: hsl(var(--background));
/* border-top: 1px solid hsl(var(--border)); */ /* Removed to avoid double border */
/* z-index: 30; */ /* No longer needed */
Expand Down
8 changes: 4 additions & 4 deletions components/chat-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
onSubmit={handleSubmit}
className={cn(
'max-w-full w-full',
isMobile ? 'px-2 pb-2 pt-1 h-full flex flex-col justify-center' : ''
isMobile ? 'p-0 h-full flex flex-col justify-center' : ''
)}
>
<div
Expand Down Expand Up @@ -240,10 +240,10 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
value={input}
data-testid="chat-input"
className={cn(
'resize-none w-full min-h-12 rounded-fill border border-input pl-14 pr-12 pt-3 pb-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'resize-none w-full rounded-fill border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Search for rounded-fill usage and definition
rg -n "rounded-fill" --type css --type ts --type js --type tsx

Repository: QueueLab/QCX

Length of output: 83

🏁 Script executed:

# Also search for any Tailwind config files that might define custom utilities
fd -e "tailwind.config" -e "tailwind.config.js" -e "tailwind.config.ts" -e "tailwind.config.cjs"

Repository: QueueLab/QCX

Length of output: 38

🏁 Script executed:

# Search for any CSS files that might define rounded-fill
rg -n "rounded-fill" --type css

Repository: QueueLab/QCX

Length of output: 38

🏁 Script executed:

# Search for rounded-fill without type restrictions to catch all occurrences
rg -n "rounded-fill"

Repository: QueueLab/QCX

Length of output: 857

🏁 Script executed:

# Find and list Tailwind configuration files
find . -type f -name "*tailwind*" | head -20

Repository: QueueLab/QCX

Length of output: 76

🏁 Script executed:

# Search for where custom utilities might be defined in the project
rg -n "rounded" --type ts --type js -A 2 -B 2 | head -50

Repository: QueueLab/QCX

Length of output: 3666

🏁 Script executed:

# Read the tailwind.config.ts file
cat ./tailwind.config.ts

Repository: QueueLab/QCX

Length of output: 2482

🏁 Script executed:

# Also check if there are any CSS files defining rounded-fill
find . -type f \( -name "*.css" -o -name "*.scss" \) -exec grep -l "rounded-fill" {} \;

Repository: QueueLab/QCX

Length of output: 38

rounded-fill is not a standard Tailwind class and is not defined as a custom utility — this is a typo for rounded-full.

The Tailwind configuration does not define any custom rounded-fill utility, and no CSS files contain this definition. This will silently produce no border-radius. Change to rounded-full.

🐛 Proposed fix 
-              'resize-none w-full rounded-fill border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'resize-none w-full rounded-full border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'resize-none w-full rounded-fill border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'resize-none w-full rounded-full border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
🤖 Prompt for AI Agents 
In `@components/chat-panel.tsx` at line 243, In the class list inside
components/chat-panel.tsx (the string containing 'resize-none w-full
rounded-fill ...'), replace the incorrect Tailwind class 'rounded-fill' with the
correct 'rounded-full' so the element receives proper border-radius; update the
class string where it's used (the className on the chat input/textarea element)
to use 'rounded-full'.

isMobile
? 'mobile-chat-input input bg-background'
: 'bg-muted'
? 'mobile-chat-input input bg-background min-h-10 pl-4 pr-10 pt-2 pb-1'
: 'bg-muted min-h-12 pl-14 pr-12 pt-3 pb-1'
)}
onChange={e => {
setInput(e.target.value)
Expand Down
8 changes: 4 additions & 4 deletions components/copilot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
<Card className="p-4 w-full flex justify-between items-center">
<div className="flex items-center space-x-2">
<Sparkles className="w-4 h-4" />
<h5 className="text-muted-foreground text-xs truncate">
<h5 className="text-muted-foreground text-xs whitespace-normal break-words">
{`error: ${error}`}
</h5>
</div>
Expand All @@ -114,7 +114,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
return (
<Card className="p-3 md:p-4 w-full flex justify-between items-center">
<div className="flex items-center space-x-2 flex-1 min-w-0">
<h5 className="text-muted-foreground text-xs truncate">
<h5 className="text-muted-foreground text-xs whitespace-normal break-words">
{updatedQuery()}
</h5>
</div>
Expand All @@ -125,7 +125,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
return (
<Card className="p-4 rounded-lg w-full mx-auto">
<div className="mb-4">
<p className="text-lg text-foreground text-semibold ml-2">
<p className="text-lg text-foreground text-semibold ml-2 break-words">
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

text-semibold is not a valid Tailwind utility — use font-semibold.

text-semibold will be silently ignored. The correct Tailwind class for semibold font weight is font-semibold.

Proposed fix 
-          <p className="text-lg text-foreground text-semibold ml-2 break-words">
+          <p className="text-lg text-foreground font-semibold ml-2 break-words">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p className="text-lg text-foreground text-semibold ml-2 break-words">
<p className="text-lg text-foreground font-semibold ml-2 break-words">
🤖 Prompt for AI Agents 
In `@components/copilot.tsx` at line 128, Replace the invalid Tailwind class on
the paragraph element: change the className value on the <p className="text-lg
text-foreground text-semibold ml-2 break-words"> JSX node to use font-semibold
instead of text-semibold so the semibold weight is applied (i.e., swap
text-semibold → font-semibold).

{data?.question || value.question}


Expand All @@ -146,7 +146,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
}
/>
<label
className="text-sm whitespace-nowrap pr-4"
className="text-sm whitespace-normal break-words pr-4"
htmlFor={option?.value}
>
{option?.label}
Expand Down
6 changes: 3 additions & 3 deletions components/empty-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,15 @@ export function EmptyScreen({
}) {
return (
<div className={`mx-auto w-full transition-all ${className}`}>
<div className="bg-background p-2">
<div className="mt-4 flex flex-col items-start space-y-2 mb-4">
<div className="bg-background p-1">
<div className="mt-2 flex flex-col items-start space-y-1 mb-2">
{exampleMessages.map((item) => {
const Icon = item.icon;
return (
<Button
key={item.message} // Use a unique property as the key.
variant="link"
className="h-auto p-0 text-base flex items-center"
className="h-auto p-0 text-base flex items-center whitespace-normal text-left"
name={item.message}
onClick={async () => {
submitMessage(item.message);
Expand Down
Binary file added verification_mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.