Skip to content

Commit baac76a

Browse files
claudeclaude
committed
Fix settings, mobile overflow, and UI consistency
Settings: - Fix export: apiCall/notifApiCall now throw on non-ok responses so handleExport properly surfaces errors instead of silently producing an empty download - Add guard: throw if data.export is missing - Replace all purple accents with #FF8A5B orange to match dashboard theme (loading spinner, tab active state, save button, notification toggles, focus ring borders) - Tab nav: overflow-x-auto + shrink-0 + labels hidden on mobile (icon only) so all 4 tabs fit on small screens - Export Data card: flex-col on mobile, flex-row on sm+ so button doesn't overflow the card edge Documents (Knowledge Base): - Document row: shrink-0 on right section, hide type/chunks badge on mobile, compact delete confirm ("Del" + X icon instead of wide "Confirm" button), smaller delete icon button with p-1.5 instead of p-2 PlaybooksView (dashboard): - Date inputs: flex-col on mobile, flex-row on sm+ - Trigger/Actions grid: grid-cols-1 on mobile, sm:grid-cols-2 on larger - Generate button: purple → #FF8A5B orange KnowledgeBase (rescue playbooks): - Playbook card: min-w-0 on left section, max-w on name input prevents overflow, flex-wrap on tag row, gap tightened for mobile - On/Off + delete area: shrink-0 so it never gets pushed off screen Model config test connection button: - Reduced from px-3 py-1.5 text-xs to px-2 py-1 text-[11px] rounded-md https://claude.ai/code/session_01SGdxNUC1TVMDtW73TZbxjW
1 parent 8e1fe3b commit baac76a

File tree

4 files changed

+53
-48
lines changed

4 files changed

+53
-48
lines changed

‎src/components/DashboardViews/DocumentsView.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -793,12 +793,12 @@ export default function DocumentsView({ isDark = true }: { isDark?: boolean }) {
793793
cardBg,
794794
expandedDocId === doc.id && (isDark ? "ring-1 ring-[#FF8A5B]/30" : "ring-1 ring-[#FF8A5B]/30")
795795
)}>
796-
<div className="flex items-center gap-4">
796+
<div className="flex items-center gap-2 sm:gap-4">
797797
{/* Expand toggle */}
798798
<button
799799
onClick={() => toggleExpand(doc)}
800800
className={cn(
801-
"p-1 rounded-md transition-colors cursor-pointer",
801+
"p-1 rounded-md transition-colors cursor-pointer shrink-0",
802802
isDark ? "hover:bg-white/10" : "hover:bg-gray-100"
803803
)}
804804
>
@@ -810,7 +810,7 @@ export default function DocumentsView({ isDark = true }: { isDark?: boolean }) {
810810

811811
{/* File icon */}
812812
<div className={cn(
813-
"w-10 h-10 rounded-xl flex items-center justify-center border flex-shrink-0",
813+
"w-8 h-8 sm:w-10 sm:h-10 rounded-xl flex items-center justify-center border flex-shrink-0",
814814
isDark ? "bg-white/5 border-white/10" : "bg-gray-50 border-gray-200"
815815
)}>
816816
{getFileIcon(doc.file_type)}
@@ -821,10 +821,10 @@ export default function DocumentsView({ isDark = true }: { isDark?: boolean }) {
821821
<p className={cn("text-sm font-medium truncate", textPrimary)}>
822822
{doc.file_name}
823823
</p>
824-
<div className={cn("flex items-center gap-3 mt-0.5 text-xs", textMuted)}>
824+
<div className={cn("flex items-center gap-2 mt-0.5 text-xs flex-wrap", textMuted)}>
825825
<span>{formatBytes(doc.file_size)}</span>
826-
<span>&middot;</span>
827-
<span className="uppercase">{doc.file_type}</span>
826+
<span className="hidden sm:inline">&middot;</span>
827+
<span className="hidden sm:inline uppercase">{doc.file_type}</span>
828828
<span>&middot;</span>
829829
<span className="flex items-center gap-1">
830830
<Clock className="w-3 h-3" />
@@ -834,18 +834,18 @@ export default function DocumentsView({ isDark = true }: { isDark?: boolean }) {
834834
</div>
835835

836836
{/* Status badge */}
837-
<div className="flex items-center gap-3">
837+
<div className="flex items-center gap-1.5 shrink-0">
838838
{doc.status === 'ready' && (
839-
<div className="flex items-center gap-2">
839+
<div className="flex items-center gap-1.5">
840840
<span className={cn(
841-
"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
841+
"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
842842
"bg-[#FF8A5B]/10 text-[#FFB286] border border-[#FF8A5B]/20"
843843
)}>
844844
<CheckCircle className="w-3 h-3" />
845-
Ready
845+
<span className="hidden sm:inline">Ready</span>
846846
</span>
847847
<span className={cn(
848-
"inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs",
848+
"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs",
849849
isDark ? "bg-white/5 text-white/60" : "bg-gray-100 text-gray-600"
850850
)}>
851851
<Layers className="w-3 h-3" />
@@ -855,20 +855,20 @@ export default function DocumentsView({ isDark = true }: { isDark?: boolean }) {
855855
)}
856856
{doc.status === 'processing' && (
857857
<span className={cn(
858-
"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
858+
"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
859859
"bg-[#FFB286]/10 text-[#FFB286] border border-[#FF8A5B]/20"
860860
)}>
861861
<Loader2 className="w-3 h-3 animate-spin" />
862-
Processing
862+
<span className="hidden sm:inline">Processing</span>
863863
</span>
864864
)}
865865
{doc.status === 'error' && (
866866
<span className={cn(
867-
"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
867+
"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
868868
"bg-red-500/10 text-red-400 border border-red-500/20"
869869
)}>
870870
<AlertCircle className="w-3 h-3" />
871-
Error
871+
<span className="hidden sm:inline">Error</span>
872872
</span>
873873
)}
874874

@@ -877,9 +877,9 @@ export default function DocumentsView({ isDark = true }: { isDark?: boolean }) {
877877
<div className="flex items-center gap-1">
878878
<button
879879
onClick={() => handleDelete(doc.id)}
880-
className="px-2.5 py-1 rounded-lg text-xs font-medium bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors cursor-pointer"
880+
className="px-2 py-0.5 rounded-lg text-xs font-medium bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors cursor-pointer"
881881
>
882-
Confirm
882+
Del
883883
</button>
884884
<button
885885
onClick={() => setDeleteConfirmId(null)}
@@ -895,13 +895,13 @@ export default function DocumentsView({ isDark = true }: { isDark?: boolean }) {
895895
<button
896896
onClick={() => setDeleteConfirmId(doc.id)}
897897
className={cn(
898-
"p-2 rounded-lg transition-colors cursor-pointer",
898+
"p-1.5 rounded-lg transition-colors cursor-pointer shrink-0",
899899
isDark
900900
? "text-white/30 hover:text-red-400 hover:bg-red-500/10"
901901
: "text-gray-400 hover:text-red-500 hover:bg-red-50"
902902
)}
903903
>
904-
<Trash2 className="w-4 h-4" />
904+
<Trash2 className="w-3.5 h-3.5" />
905905
</button>
906906
)}
907907
</div>

‎src/components/DashboardViews/PlaybooksView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export default function PlaybooksView({ isDark = true }: { isDark?: boolean }) {
134134
<label className={cn("text-sm font-medium block mb-3", isDark ? "text-white/80" : "text-gray-700")}>
135135
Select Date Range for Analysis
136136
</label>
137-
<div className="flex gap-4 mb-4">
137+
<div className="flex flex-col sm:flex-row gap-3 mb-4">
138138
<input
139139
type="date"
140140
value={dateRange.start}
@@ -161,7 +161,7 @@ export default function PlaybooksView({ isDark = true }: { isDark?: boolean }) {
161161
"w-full py-2 rounded-lg font-medium text-sm flex items-center justify-center gap-2 transition-colors",
162162
isGenerating || !dateRange.start || !dateRange.end
163163
? (isDark ? "bg-white/10 text-white/50 cursor-not-allowed" : "bg-gray-100 text-gray-400 cursor-not-allowed")
164-
: (isDark ? "bg-purple-600 hover:bg-purple-700 text-white" : "bg-purple-500 hover:bg-purple-600 text-white")
164+
: "bg-[#FF8A5B] hover:bg-[#FF9E6C] text-white"
165165
)}
166166
>
167167
{isGenerating && <Loader2 className="w-4 h-4 animate-spin" />}
@@ -210,7 +210,7 @@ export default function PlaybooksView({ isDark = true }: { isDark?: boolean }) {
210210
<Trash2 className="w-4 h-4" />
211211
</button>
212212
</div>
213-
<div className="grid grid-cols-2 gap-3 text-xs">
213+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
214214
<div>
215215
<p className={cn("font-medium mb-1", isDark ? "text-white/60" : "text-gray-600")}>
216216
Triggers

0 commit comments

Comments
 (0)