Minor UI fixes (#707)

* fix projects list on mobile

* minor improvements for mobile view, improve button colours in dark mode

frontend/src/components/projects/project-list.tsx

@@ -142,7 +142,7 @@ export function ProjectList() {
   }, []);
 
   return (
-    <div className="space-y-6 p-8 h-full">
+    <div className="space-y-6 p-8 pb-16 md:pb-8 h-full overflow-auto">
       <div className="flex justify-between items-center">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">Projects</h1>

frontend/src/components/tasks/AttemptHeaderCard.tsx

@@ -57,7 +57,7 @@ export function AttemptHeaderCard({
 
   return (
     <Card className="border-b border-dashed bg-background flex items-center text-sm">
-      <div className="flex-1 flex gap-6 p-3">
+      <div className="flex-1 flex gap-6 p-3 flex-wrap md:flex-nowrap">
         <p>
           <span className="text-secondary-foreground">Attempt &middot; </span>
           {attemptNumber}/{totalAttempts}

frontend/src/components/tasks/TaskFollowUpSection.tsx

@@ -1,31 +1,31 @@
 import {
   AlertCircle,
   CheckCircle2,
-  WifiOff,
-  Clock,
-  Send,
   ChevronDown,
+  Clock,
   ImageIcon,
+  Loader2,
+  Send,
   StopCircle,
+  WifiOff,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ImageUploadSection } from '@/components/ui/ImageUploadSection';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { FileSearchTextarea } from '@/components/ui/file-search-textarea';
-import { useEffect, useMemo, useState, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   attemptsApi,
   imagesApi,
   type UpdateFollowUpDraftRequest,
 } from '@/lib/api.ts';
 import type {
+  FollowUpDraft,
   ImageResponse,
   TaskWithAttemptStatus,
-  FollowUpDraft,
 } from 'shared/types';
 import { useBranchStatus } from '@/hooks';
 import { useAttemptExecution } from '@/hooks/useAttemptExecution';
-import { Loader2 } from 'lucide-react';
 import { useUserSystem } from '@/components/config-provider';
 import {
   DropdownMenu,
@@ -890,7 +890,7 @@ export function TaskFollowUpSection({
                   ) : null}
                 </div>
               </div>
-              <div className="flex flex-row items-center">
+              <div className="flex flex-row gap-2 items-center">
                 <div className="flex-1 flex gap-2">
                   {/* Image button */}
                   <Button
@@ -923,7 +923,7 @@ export function TaskFollowUpSection({
                               variant="secondary"
                               size="sm"
                               className={cn(
-                                'w-24 px-2 flex items-center justify-between transition-all',
+                                'w-18 md:w-24 px-2 flex items-center justify-between transition-all',
                                 isAnimating && 'scale-105 bg-accent'
                               )}
                               disabled={isDraftLocked || !isDraftReady}
@@ -1090,7 +1090,7 @@ export function TaskFollowUpSection({
                   </div>
                 )}
                 {isAttemptRunning && (
-                  <div className="ml-2 flex items-center gap-2">
+                  <div className="flex items-center gap-2">
                     <Button
                       onClick={async () => {
                         if (!selectedAttemptId) return;
@@ -1156,7 +1156,7 @@ export function TaskFollowUpSection({
                       }
                       size="sm"
                       variant="default"
-                      className="min-w-[180px] transition-all"
+                      className="md:min-w-[180px] transition-all"
                     >
                       {isQueued ? (
                         isUnqueuing ? (

frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx

@@ -7,9 +7,9 @@ import {
   Play,
   Plus,
   RefreshCw,
+  ScrollText,
   Settings,
   StopCircle,
-  ScrollText,
 } from 'lucide-react';
 import {
   Tooltip,
@@ -365,7 +365,7 @@ function CurrentAttempt({
       const prMerge = mergeInfo.openPR;
       return {
         dotColor: 'bg-blue-500',
-        textColor: 'text-blue-700',
+        textColor: 'text-blue-700 dark:text-blue-400',
         text: `PR #${prMerge.pr_info.number}`,
         isClickable: true,
         onClick: () => window.open(prMerge.pr_info.url, '_blank'),
@@ -605,7 +605,7 @@ function CurrentAttempt({
                   }
                   variant="outline"
                   size="xs"
-                  className="border-blue-300 text-blue-700 hover:bg-blue-50 gap-1 min-w-[120px]"
+                  className="border-blue-300  dark:border-blue-700 text-blue-700 dark:text-blue-500 hover:bg-blue-50 dark:hover:bg-transparent dark:hover:text-blue-400 dark:hover:border-blue-400 gap-1 min-w-[120px]"
                 >
                   <GitPullRequest className="h-3 w-3" />
                   {mergeInfo.hasOpenPR
@@ -634,7 +634,7 @@ function CurrentAttempt({
                       !mergeSuccess)
                   }
                   size="xs"
-                  className="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 gap-1 min-w-[120px]"
+                  className="bg-green-600 hover:bg-green-700 dark:bg-green-900 dark:hover:bg-green-700 gap-1 min-w-[120px]"
                 >
                   <GitBranchIcon className="h-3 w-3" />
                   {mergeSuccess ? 'Merged!' : merging ? 'Merging...' : 'Merge'}