diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx index 273791290..39f114742 100644 --- a/src/components/AIView.tsx +++ b/src/components/AIView.tsx @@ -97,6 +97,11 @@ const WorkspacePath = styled.span` overflow: hidden; text-overflow: ellipsis; min-width: 0; + + /* Hide path on mobile to save space */ + @media (max-width: 768px) { + display: none; + } `; const WorkspaceName = styled.span` diff --git a/src/components/Messages/UserMessage.tsx b/src/components/Messages/UserMessage.tsx index f1f44fc6a..331a14ade 100644 --- a/src/components/Messages/UserMessage.tsx +++ b/src/components/Messages/UserMessage.tsx @@ -26,7 +26,7 @@ const ImageContainer = styled.div` `; const MessageImage = styled.img` - max-width: 300px; + max-width: min(300px, calc(100vw - 100px)); max-height: 300px; border-radius: 4px; border: 1px solid #3e3e42; diff --git a/src/components/ModelSelector.tsx b/src/components/ModelSelector.tsx index 2ea6cb3a4..bcc97a5c4 100644 --- a/src/components/ModelSelector.tsx +++ b/src/components/ModelSelector.tsx @@ -27,7 +27,7 @@ const ModelDisplay = styled.div<{ clickable?: boolean }>` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 150px; + max-width: min(150px, 40vw); direction: rtl; /* Right-to-left to show end of text */ text-align: left; /* Keep visual alignment left */ @@ -45,7 +45,7 @@ const InputField = styled.input` padding: 2px 4px; font-family: var(--font-monospace); line-height: 11px; - width: 200px; + width: min(200px, 60vw); outline: none; &:focus { @@ -63,7 +63,7 @@ const Dropdown = styled.div` border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; - min-width: 300px; + min-width: min(300px, 85vw); max-height: 200px; overflow-y: auto; `; diff --git a/src/components/ProjectSidebar.tsx b/src/components/ProjectSidebar.tsx index bcd79d578..775c5fdc8 100644 --- a/src/components/ProjectSidebar.tsx +++ b/src/components/ProjectSidebar.tsx @@ -363,7 +363,7 @@ const RemoveErrorToast = styled.div<{ top: number; left: number }>` position: fixed; top: ${(props) => props.top}px; left: ${(props) => props.left}px; - max-width: 400px; + max-width: min(400px, calc(100vw - 40px)); padding: 12px 16px; background: var(--color-error-bg); border: 1px solid var(--color-error); diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index 0288cc75a..e3e15b64c 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -244,7 +244,8 @@ const StyledTooltip = styled.div<{ width: string; interactive: boolean }>` padding: 6px 10px; z-index: 9999; white-space: ${(props) => (props.width === "wide" ? "normal" : "nowrap")}; - ${(props) => props.width === "wide" && "max-width: 300px; width: max-content;"} + ${(props) => + props.width === "wide" && "max-width: min(300px, calc(100vw - 40px)); width: max-content;"} font-size: 11px; font-weight: normal; font-family: var(--font-primary); diff --git a/src/components/tools/BashToolCall.tsx b/src/components/tools/BashToolCall.tsx index 901d0235f..d726836a2 100644 --- a/src/components/tools/BashToolCall.tsx +++ b/src/components/tools/BashToolCall.tsx @@ -24,7 +24,7 @@ const ScriptPreview = styled.span` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 400px; + max-width: min(400px, 80vw); `; const OutputBlock = styled.pre` diff --git a/src/components/tools/FileEditToolCall.tsx b/src/components/tools/FileEditToolCall.tsx index 68e13a7e0..5f6c4c563 100644 --- a/src/components/tools/FileEditToolCall.tsx +++ b/src/components/tools/FileEditToolCall.tsx @@ -32,7 +32,7 @@ const FilePath = styled.span` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 400px; + max-width: min(400px, 80vw); `; const ErrorMessage = styled.div` diff --git a/src/components/tools/FileReadToolCall.tsx b/src/components/tools/FileReadToolCall.tsx index 3e3a99cde..398b7fc9f 100644 --- a/src/components/tools/FileReadToolCall.tsx +++ b/src/components/tools/FileReadToolCall.tsx @@ -23,7 +23,7 @@ const FilePathText = styled.span` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 400px; + max-width: min(400px, 80vw); `; const MetadataText = styled.span`