From f45f398d817f61606930bb25e33e8da2ccb39625 Mon Sep 17 00:00:00 2001
From: Robert Brennan <accounts@rbren.io>
Date: Sat, 3 May 2025 17:42:02 -0400
Subject: [PATCH] Small tweaks for mobile styles (#8228)

---
 frontend/src/components/features/controls/controls.tsx         | 2 +-
 .../features/conversation-panel/conversation-card.tsx          | 2 +-
 frontend/src/routes/home.tsx                                   | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/features/controls/controls.tsx b/frontend/src/components/features/controls/controls.tsx
index 7654703379..4fbe0e0989 100644
--- a/frontend/src/components/features/controls/controls.tsx
+++ b/frontend/src/components/features/controls/controls.tsx
@@ -20,7 +20,7 @@ export function Controls({ setSecurityOpen, showSecurityLock }: ControlsProps) {
   useAutoTitle();
 
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex flex-col gap-2 md:items-center md:justify-between md:flex-row">
       <div className="flex items-center gap-2">
         <AgentControlBar />
         <AgentStatusBar />
diff --git a/frontend/src/components/features/conversation-panel/conversation-card.tsx b/frontend/src/components/features/conversation-panel/conversation-card.tsx
index 26569ff088..56a21e5f97 100644
--- a/frontend/src/components/features/conversation-panel/conversation-card.tsx
+++ b/frontend/src/components/features/conversation-panel/conversation-card.tsx
@@ -164,7 +164,7 @@ export function ConversationCard({
         className={cn(
           "h-[100px] w-full px-[18px] py-4 border-b border-neutral-600 cursor-pointer",
           variant === "compact" &&
-            "h-auto w-fit rounded-xl border border-[#525252]",
+            "md:w-fit h-auto rounded-xl border border-[#525252]",
         )}
       >
         <div className="flex items-center justify-between w-full">
diff --git a/frontend/src/routes/home.tsx b/frontend/src/routes/home.tsx
index 4331fbbfec..a69433c734 100644
--- a/frontend/src/routes/home.tsx
+++ b/frontend/src/routes/home.tsx
@@ -22,10 +22,11 @@ function HomeScreen() {
 
       <hr className="border-[#717888]" />
 
-      <main className="flex flex-col md:flex-row justify-between gap-4">
+      <main className="flex flex-col md:flex-row justify-between gap-8">
         <RepoConnector
           onRepoSelection={(title) => setSelectedRepoTitle(title)}
         />
+        <hr className="md:hidden border-[#717888]" />
         {providersAreSet && <TaskSuggestions filterFor={selectedRepoTitle} />}
       </main>
     </div>