🤖 Fix mobile viewport overflow issues (#375)

Author: kylecarbs

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`

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;

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;
 `;

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);

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);

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`

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`

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`