Skip to content

Commit dee39f5

Browse files
authored
🤖 Fix mobile viewport overflow issues (#375)
1 parent bbde9c6 commit dee39f5

File tree

8 files changed

+15
-9
lines changed

8 files changed

+15
-9
lines changed

src/components/AIView.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,11 @@ const WorkspacePath = styled.span`
9797
overflow: hidden;
9898
text-overflow: ellipsis;
9999
min-width: 0;
100+
101+
/* Hide path on mobile to save space */
102+
@media (max-width: 768px) {
103+
display: none;
104+
}
100105
`;
101106

102107
const WorkspaceName = styled.span`

src/components/Messages/UserMessage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const ImageContainer = styled.div`
2626
`;
2727

2828
const MessageImage = styled.img`
29-
max-width: 300px;
29+
max-width: min(300px, calc(100vw - 100px));
3030
max-height: 300px;
3131
border-radius: 4px;
3232
border: 1px solid #3e3e42;

src/components/ModelSelector.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const ModelDisplay = styled.div<{ clickable?: boolean }>`
2727
white-space: nowrap;
2828
overflow: hidden;
2929
text-overflow: ellipsis;
30-
max-width: 150px;
30+
max-width: min(150px, 40vw);
3131
direction: rtl; /* Right-to-left to show end of text */
3232
text-align: left; /* Keep visual alignment left */
3333
@@ -45,7 +45,7 @@ const InputField = styled.input`
4545
padding: 2px 4px;
4646
font-family: var(--font-monospace);
4747
line-height: 11px;
48-
width: 200px;
48+
width: min(200px, 60vw);
4949
outline: none;
5050
5151
&:focus {
@@ -63,7 +63,7 @@ const Dropdown = styled.div`
6363
border-radius: 4px;
6464
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
6565
z-index: 1000;
66-
min-width: 300px;
66+
min-width: min(300px, 85vw);
6767
max-height: 200px;
6868
overflow-y: auto;
6969
`;

src/components/ProjectSidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,7 @@ const RemoveErrorToast = styled.div<{ top: number; left: number }>`
363363
position: fixed;
364364
top: ${(props) => props.top}px;
365365
left: ${(props) => props.left}px;
366-
max-width: 400px;
366+
max-width: min(400px, calc(100vw - 40px));
367367
padding: 12px 16px;
368368
background: var(--color-error-bg);
369369
border: 1px solid var(--color-error);

src/components/Tooltip.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,8 @@ const StyledTooltip = styled.div<{ width: string; interactive: boolean }>`
244244
padding: 6px 10px;
245245
z-index: 9999;
246246
white-space: ${(props) => (props.width === "wide" ? "normal" : "nowrap")};
247-
${(props) => props.width === "wide" && "max-width: 300px; width: max-content;"}
247+
${(props) =>
248+
props.width === "wide" && "max-width: min(300px, calc(100vw - 40px)); width: max-content;"}
248249
font-size: 11px;
249250
font-weight: normal;
250251
font-family: var(--font-primary);

src/components/tools/BashToolCall.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const ScriptPreview = styled.span`
2424
white-space: nowrap;
2525
overflow: hidden;
2626
text-overflow: ellipsis;
27-
max-width: 400px;
27+
max-width: min(400px, 80vw);
2828
`;
2929

3030
const OutputBlock = styled.pre`

src/components/tools/FileEditToolCall.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const FilePath = styled.span`
3232
white-space: nowrap;
3333
overflow: hidden;
3434
text-overflow: ellipsis;
35-
max-width: 400px;
35+
max-width: min(400px, 80vw);
3636
`;
3737

3838
const ErrorMessage = styled.div`

src/components/tools/FileReadToolCall.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const FilePathText = styled.span`
2323
white-space: nowrap;
2424
overflow: hidden;
2525
text-overflow: ellipsis;
26-
max-width: 400px;
26+
max-width: min(400px, 80vw);
2727
`;
2828

2929
const MetadataText = styled.span`

0 commit comments

Comments
 (0)