Skip to content

Commit b725c55

Browse files
Naseem77Naseem77
authored
Merge pull request #353 from FalkorDB/fix-mobile-improve-mobile-UI-spacing-and-header-layout
fix(mobile): improve mobile UI spacing and header layout
2 parents 3e0f2f9 + 3234031 commit b725c55

3 files changed

Lines changed: 66 additions & 66 deletions

File tree

‎app/src/components/SuggestionCards.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface SuggestionCardsProps {
88

99
const SuggestionCards = ({ suggestions, onSelect, disabled = false }: SuggestionCardsProps) => {
1010
return (
11-
<div className="grid gap-3 mb-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
11+
<div className="grid gap-2 sm:gap-3 mb-3 sm:mb-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
1212
{suggestions.map((suggestion) => (
1313
<Card
1414
key={suggestion}
@@ -25,7 +25,7 @@ const SuggestionCards = ({ suggestions, onSelect, disabled = false }: Suggestion
2525
}
2626
}}
2727
>
28-
<CardContent className="p-3 sm:p-4">
28+
<CardContent className="p-2 sm:p-4">
2929
<div className="text-gray-300 text-xs sm:text-sm text-center line-clamp-2">
3030
{suggestion}
3131
</div>

‎app/src/components/ui/dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
3636
<DialogPrimitive.Content
3737
ref={ref}
3838
className={cn(
39-
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg mx-4 sm:mx-0",
39+
"fixed left-4 right-4 top-[50%] z-50 grid w-auto translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] sm:left-[50%] sm:right-auto sm:w-full sm:max-w-lg sm:translate-x-[-50%] sm:rounded-lg",
4040
className,
4141
)}
4242
{...props}

‎app/src/pages/Index.tsx‎

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -443,79 +443,79 @@ const Index = () => {
443443
)}
444444
<img src="/icons/queryweaver.svg" alt="QueryWeaver" className="h-8" data-testid="logo" />
445445
</div>
446-
{isAuthenticated ? (
447-
<DropdownMenu>
448-
<DropdownMenuTrigger asChild>
449-
<Button
450-
variant="ghost"
451-
className="p-0 h-auto rounded-full hover:opacity-80 transition-opacity"
452-
>
453-
<Avatar className="h-8 w-8 border-2 border-purple-500">
454-
<AvatarImage src={user?.picture} alt={user?.name || user?.email} />
455-
<AvatarFallback className="bg-purple-600 text-white font-medium text-xs">
456-
{(user?.name || user?.email || 'U').charAt(0).toUpperCase()}
457-
</AvatarFallback>
458-
</Avatar>
459-
</Button>
460-
</DropdownMenuTrigger>
461-
<DropdownMenuContent className="bg-gray-800 border-gray-600 text-gray-200" align="end">
462-
<div className="px-3 py-2 border-b border-gray-600" data-testid="user-info-section">
463-
<p className="text-sm font-medium text-gray-100" data-testid="user-name-display">{user?.name}</p>
464-
<p className="text-xs text-gray-400" data-testid="user-email-display">{user?.email}</p>
465-
</div>
466-
<DropdownMenuItem className="hover:!bg-gray-700 cursor-pointer" onClick={() => setShowTokensModal(true)} data-testid="api-tokens-menu-item">
467-
API Tokens
468-
</DropdownMenuItem>
469-
<DropdownMenuSeparator className="bg-gray-600" />
470-
<DropdownMenuItem className="hover:!bg-gray-700 cursor-pointer" onClick={handleLogout} data-testid="logout-menu-item">
471-
Logout
472-
</DropdownMenuItem>
473-
</DropdownMenuContent>
474-
</DropdownMenu>
475-
) : (
476-
<Button
477-
variant="outline"
478-
size="sm"
479-
className="bg-purple-600 border-purple-500 text-white hover:bg-purple-700"
480-
onClick={() => setShowLoginModal(true)}
446+
<div className="flex items-center gap-2">
447+
<a
448+
href="https://github.com/FalkorDB/QueryWeaver"
449+
target="_blank"
450+
rel="noopener noreferrer"
451+
className="flex items-center gap-1 px-2 py-1 rounded bg-gray-800 hover:bg-gray-700 transition-colors text-gray-300"
481452
>
482-
Sign In
483-
</Button>
484-
)}
453+
<svg
454+
width="14"
455+
height="14"
456+
viewBox="0 0 24 24"
457+
fill="currentColor"
458+
xmlns="http://www.w3.org/2000/svg"
459+
>
460+
<path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
461+
</svg>
462+
<Star className="w-3 h-3" fill="currentColor" />
463+
<span className="text-xs font-medium">{githubStars}</span>
464+
</a>
465+
{isAuthenticated ? (
466+
<DropdownMenu>
467+
<DropdownMenuTrigger asChild>
468+
<Button
469+
variant="ghost"
470+
className="p-0 h-auto rounded-full hover:opacity-80 transition-opacity"
471+
>
472+
<Avatar className="h-8 w-8 border-2 border-purple-500">
473+
<AvatarImage src={user?.picture} alt={user?.name || user?.email} />
474+
<AvatarFallback className="bg-purple-600 text-white font-medium text-xs">
475+
{(user?.name || user?.email || 'U').charAt(0).toUpperCase()}
476+
</AvatarFallback>
477+
</Avatar>
478+
</Button>
479+
</DropdownMenuTrigger>
480+
<DropdownMenuContent className="bg-gray-800 border-gray-600 text-gray-200" align="end">
481+
<div className="px-3 py-2 border-b border-gray-600" data-testid="user-info-section">
482+
<p className="text-sm font-medium text-gray-100" data-testid="user-name-display">{user?.name}</p>
483+
<p className="text-xs text-gray-400" data-testid="user-email-display">{user?.email}</p>
484+
</div>
485+
<DropdownMenuItem className="hover:!bg-gray-700 cursor-pointer" onClick={() => setShowTokensModal(true)} data-testid="api-tokens-menu-item">
486+
API Tokens
487+
</DropdownMenuItem>
488+
<DropdownMenuSeparator className="bg-gray-600" />
489+
<DropdownMenuItem className="hover:!bg-gray-700 cursor-pointer" onClick={handleLogout} data-testid="logout-menu-item">
490+
Logout
491+
</DropdownMenuItem>
492+
</DropdownMenuContent>
493+
</DropdownMenu>
494+
) : (
495+
<Button
496+
variant="outline"
497+
size="sm"
498+
className="bg-purple-600 border-purple-500 text-white hover:bg-purple-700"
499+
onClick={() => setShowLoginModal(true)}
500+
>
501+
Sign In
502+
</Button>
503+
)}
504+
</div>
485505
</div>
486506

487-
{/* Row 2: Tagline */}
488-
<p className="text-xs text-gray-400">Graph-Powered Text-to-SQL</p>
489-
490-
{/* Row 3: Status and GitHub */}
507+
{/* Row 2: Tagline + Database Status */}
491508
<div className="flex items-center justify-between gap-2">
509+
<p className="text-xs text-gray-400">Graph-Powered Text-to-SQL</p>
492510
{selectedGraph ? (
493-
<Badge variant="default" className="bg-green-600 hover:bg-green-700 text-xs px-2 py-0.5">
494-
{selectedGraph.name}
511+
<Badge variant="default" className="bg-green-600 hover:bg-green-700 text-xs px-2 py-0.5 flex-shrink-0">
512+
{selectedGraph.name === 'DEMO_CRM' ? 'CRM' : selectedGraph.name}
495513
</Badge>
496514
) : (
497-
<Badge variant="secondary" className="bg-yellow-600 hover:bg-yellow-700 text-xs px-2 py-0.5">
515+
<Badge variant="secondary" className="bg-yellow-600 hover:bg-yellow-700 text-xs px-2 py-0.5 flex-shrink-0">
498516
No DB
499517
</Badge>
500518
)}
501-
<a
502-
href="https://github.com/FalkorDB/QueryWeaver"
503-
target="_blank"
504-
rel="noopener noreferrer"
505-
className="flex items-center gap-1 px-2 py-1 rounded bg-gray-800 hover:bg-gray-700 transition-colors text-gray-300"
506-
>
507-
<svg
508-
width="14"
509-
height="14"
510-
viewBox="0 0 24 24"
511-
fill="currentColor"
512-
xmlns="http://www.w3.org/2000/svg"
513-
>
514-
<path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
515-
</svg>
516-
<Star className="w-3 h-3" fill="currentColor" />
517-
<span className="text-xs font-medium">{githubStars}</span>
518-
</a>
519519
</div>
520520
</div>
521521
</header>

0 commit comments

Comments
 (0)