Skip to content

feat: update app spacing #2444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Wutche wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: update app spacing #2444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/connections/AlbyConnectionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ function AlbyConnectionCard() {
</CardHeader>
<Separator />
<CardContent className="group">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-3 items-center relative">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4 items-center relative">
<div className="flex flex-col gap-4">
<div className="flex flex-row gap-4">
<UserAvatar className="h-14 w-14" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/connections/AppDetailConnectedApps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function AppDetailConnectedApps({
{showTitle && (
<h2 className="font-medium text-lg mt-6">Your Connections</h2>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{connectedApps.map((app) => (
<AppCard key={app.id} app={app} />
))}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/connections/AppStore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import SuggestedApps from "src/components/connections/SuggestedApps";

function AppStore() {
return (
<>
<div className="flex flex-col gap-4">
<div className="flex flex-col flex-1">
<div className="flex justify-between items-center">
<div className="flex-1">
Expand All @@ -21,7 +21,7 @@ function AppStore() {
</div>
</div>
<SuggestedApps />
</>
</div>
);
}

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/connections/AppUsage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function AppUsage({ app }: { app: App }) {
{app.isolated && (
<div
className={cn(
"grid grid-cols-1 gap-3",
"grid grid-cols-1 gap-4",
app.metadata?.app_store_app_id === SUBWALLET_APPSTORE_APP_ID &&
"lg:grid-cols-2"
)}
Expand Down Expand Up @@ -201,7 +201,7 @@ export function AppUsage({ app }: { app: App }) {
</div>
)}

<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<Card>
<CardHeader>
<CardTitle>Total Spent</CardTitle>
Expand Down
10 changes: 4 additions & 6 deletions frontend/src/components/connections/ConnectedApps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function ConnectedApps() {
);

return (
<>
<div className="flex flex-col gap-4">
<div className="flex flex-col flex-1">
<div className="flex justify-between items-center">
<div className="flex-1">
Expand All @@ -76,13 +76,11 @@ function ConnectedApps() {
</div>

{info.albyAccountConnected && (
<div className="mt-6">
<div>
<AlbyConnectionCard />
</div>
)}

<div className="mt-6" />

{!otherApps.length && (
<EmptyState
icon={CableIcon}
Expand All @@ -97,7 +95,7 @@ function ConnectedApps() {
{otherApps.length > 0 && (
<div
ref={appsListRef}
className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch"
className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch"
>
{otherApps.map((app, index) => (
<AppCard key={index} app={app} />
Expand All @@ -111,7 +109,7 @@ function ConnectedApps() {
page={page}
handlePageChange={handlePageChange}
/>
</>
</div>
);
}

Expand Down
14 changes: 7 additions & 7 deletions frontend/src/components/connections/SuggestedApps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ import {

function AppCard(app: AppStoreApp) {
return (
<Link to={getAppStoreUrl(app)}>
<Card className="h-full">
<Link to={getAppStoreUrl(app)} className="min-w-0">
<Card className="h-full min-w-0">
<CardContent>
<div className="flex gap-3 items-center">
<img
src={app.logo}
alt={`${app.title} logo`}
className="inline rounded-lg size-12"
/>
<div className="grow">
<div className="grow min-w-0">
<CardTitle>{app.title}</CardTitle>
<CardDescription>
{app.description}
Expand All @@ -53,7 +53,7 @@ export default function SuggestedApps() {

return (
<>
<div className="flex gap-2 flex-wrap mt-6 mb-2">
<div className="flex gap-2 flex-wrap">
{sortedAppStoreCategories.map(([categoryId, category]) => (
<Badge
key={categoryId}
Expand All @@ -77,7 +77,7 @@ export default function SuggestedApps() {
</Badge>
))}
</div>
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-4">
{sortedAppStoreCategories
.filter(
([categoryId]) =>
Expand All @@ -86,9 +86,9 @@ export default function SuggestedApps() {
)
.map(([categoryId, category]) => {
return (
<div key={categoryId} className="pt-4">
<div key={categoryId}>
<h3 className="font-semibold text-xl">{category.title}</h3>
<div className="grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 mt-4">
<div className="grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 mt-4">
{appStoreApps
.filter((app) =>
(app.categories as string[]).includes(categoryId)
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/layouts/SettingsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default function SettingsLayout() {
}
/>

<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-4 lg:space-y-0 h-full">
<div className="flex flex-col gap-4 lg:flex-row h-full">
<aside className="flex flex-col justify-between lg:w-1/5">
<nav className="flex overflow-x-auto pb-2 gap-1 lg:flex-col lg:overflow-x-visible lg:pb-0 lg:gap-0 lg:space-y-0.5">
<MenuItem to="/settings" icon={SlidersHorizontalIcon}>
Expand Down Expand Up @@ -182,7 +182,7 @@ export default function SettingsLayout() {
</aside>
<Separator orientation="vertical" className="hidden lg:block" />
<div className="flex-1 lg:max-w-2xl">
<div className="grid gap-6">
<div className="grid gap-4">
<Outlet />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/ConnectAlbyAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) {
pageTitle="Connect Your Alby Account"
description="Your Alby Account brings several benefits to your Alby Hub"
/>
<div className="grid grid-cols-1 md:grid-cols-2 w-full gap-3 mt-5">
<div className="grid grid-cols-1 md:grid-cols-2 w-full gap-4 mt-5">
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<ZapIcon className="size-6" />
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/screens/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function Home() {
title="Home"
contentRight={<SearchInput placeholder="Search" />}
/>
<div className="columns-1 lg:columns-2 gap-3 *:mb-3 *:break-inside-avoid">
<div className="columns-1 lg:columns-2 gap-4 *:mb-4 *:break-inside-avoid">
<OnboardingChecklist />
<StoriesWidget />
<WhatsNewWidget />
Expand All @@ -60,7 +60,7 @@ function Home() {
</CardHeader>
{isNerd && (
<CardContent>
<div className="grid gap-3">
<div className="grid gap-4">
<NodeStatusWidget />
<BlockHeightWidget />
<OnchainFeesWidget />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/ai/AI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,7 @@ export function AI() {
{/* Featured services — branded full cards */}
<div>
<h2 className="text-2xl font-bold mb-4">Featured Services</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<ExternalLink to="https://www.bitrefill.com/agents">
<Card className="group relative h-full hover:border-primary/30 transition-colors p-0">
<CardContent className="p-4 flex flex-col h-full">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/alby/SupportAlby.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ function SupportAlby() {
description="We are committed to elevating the Bitcoin ecosystem by offering reliable, efficient, and user-friendly software solutions for seamless transactions. With your help, we can keep pushing boundaries and evolving Alby Hub into something extraordinary."
/>
<h2 className="text-2xl font-semibold">Become a Supporter</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<Card className="flex flex-col">
<CardHeader className="grow">
<CardTitle>Upgrade to Pro</CardTitle>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/apps/AppDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
{!isEditingPermissions && (
<>
{appStoreApp && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<AboutAppCard appStoreApp={appStoreApp} />
<AppLinksCard appStoreApp={appStoreApp} />
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/screens/apps/AppsCleanup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ export function AppsCleanup() {
</AlertDescription>
</Alert>
)}
<div className="grid grid-cols-1 lg:grid-cols-5 gap-3">
<div className="lg:col-span-3 flex flex-col gap-3">
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
<div className="lg:col-span-3 flex flex-col gap-4">
{currentApp && (
<>
<div className="w-full h-full">
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/screens/apps/Connections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ export function Connections() {
/>
}
/>
<Tabs value={tab} onValueChange={setTab} className="px-2 lg:px-0">
<TabsList className="mb-2 lg:mb-6">
<Tabs value={tab} onValueChange={setTab} className="gap-4">
<TabsList>
Comment on lines +44 to +45

@coderabbitai coderabbitai Bot Jun 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check the shadcn/ui Tabs component styling to confirm flex display and direction
fd -t f 'tabs\.(ts|tsx)' frontend/src/components/ui/ -x grep -l "display" {} \;
# Then check the actual component file
fd -t f 'tabs\.(ts|tsx)' frontend/src/components/ui/ -x cat {} \;

Repository: getAlby/hub

Length of output: 3832

🏁 Script executed:

#!/bin/bash
set -euo pipefail
# Inspect the relevant portion of Connections.tsx around the cited lines
sed -n '1,120p' frontend/src/screens/apps/Connections.tsx | cat -n | sed -n '30,100p'

Repository: getAlby/hub

Length of output: 1297

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect Connections.tsx around the cited lines (44-45) and the TabsList margin change
sed -n '1,120p' frontend/src/screens/apps/Connections.tsx | cat -n | sed -n '35,90p'

Repository: getAlby/hub

Length of output: 1198

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Show more context around the Tabs in Connections.tsx to find any parent padding/wrappers
sed -n '1,140p' frontend/src/screens/apps/Connections.tsx | cat -n

# Also locate all occurrences of "px-" and "mb-" in Connections.tsx to see what spacing is applied elsewhere
rg -n --no-heading "px-|mb-" frontend/src/screens/apps/Connections.tsx

Repository: getAlby/hub

Length of output: 2526

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Look for the old/new class strings in Connections.tsx (current file may not contain them)
rg -n --no-heading "px-2 lg:px-0|mb-2 lg:mb-6" frontend/src/screens/apps/Connections.tsx

# Find any other occurrence of these exact classes across the frontend
rg -n --no-heading "px-2 lg:px-0" frontend/src | head -n 50
rg -n --no-heading "mb-2 lg:mb-6" frontend/src | head -n 50

# Inspect AppHeader to see if it provides horizontal padding for its content area
fd -t f "AppHeader\.(ts|tsx)" frontend/src/components | xargs -r -n 1 echo
fd -t f "AppHeader\.(ts|tsx)" frontend/src/components -x cat {} | head -n 200

Repository: getAlby/hub

Length of output: 37

🏁 Script executed:

#!/bin/bash
set -u

# 1) Get the exact Tabs component file path(s)
echo "== Tabs component files ==" 
fd -t f 'tabs\.(ts|tsx)' frontend/src/components/ui/ -x echo

# 2) Print the Tabs.tsx/ts file with line numbers for easier reference
echo "== Tabs component contents (first 160 lines) =="
for f in $(fd -t f 'tabs\.(ts|tsx)' frontend/src/components/ui/); do
  echo "--- $f ---"
  sed -n '1,160p' "$f" | cat -n
done

# 3) Inspect AppHeader layout (padding/margins could come from here or its wrapper)
echo "== AppHeader files =="
fd -t f "AppHeader\.(ts|tsx)" frontend/src/components | head -n 20
APP_HEADER_FILE="$(fd -t f "AppHeader\.(ts|tsx)" frontend/src/components | head -n 1 || true)"
if [ -n "${APP_HEADER_FILE:-}" ]; then
  echo "== AppHeader: $APP_HEADER_FILE (first 220 lines) =="
  sed -n '1,220p' "$APP_HEADER_FILE" | cat -n
fi

# 4) Find where Connections is rendered and whether there’s a wrapper applying px-*/mx-* around it
echo "== References to Connections component =="
rg -n "from \"src/screens/apps/Connections\"|<Connections\b|function Connections\b" frontend/src | head -n 50

Repository: getAlby/hub

Length of output: 6923

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect routes around where Connections is rendered
sed -n '250,340p' frontend/src/routes.tsx | cat -n

# Search for common page container/padding components in routes.tsx near the Connections route
rg -n --no-heading "Connections|element: <Connections|path: \"?/apps\"|layout|Page|container|max-w|px-|py-" frontend/src/routes.tsx | head -n 80

# Also inspect the immediate route block around line 299 more fully
sed -n '270,320p' frontend/src/routes.tsx | cat -n

Repository: getAlby/hub

Length of output: 5167

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find where AppLayout is used in routes.tsx
rg -n "AppLayout" frontend/src/routes.tsx

# Show the route block near the first AppLayout usage
# (Use a wider window around the first match)
FIRST_MATCH_LINE=$(rg -n "AppLayout" frontend/src/routes.tsx | head -n 1 | cut -d: -f1)
START=$((FIRST_MATCH_LINE-120))
END=$((FIRST_MATCH_LINE+120))
sed -n "${START},${END}p" frontend/src/routes.tsx | cat -n

# Inspect AppLayout implementation
APP_LAYOUT_FILE="frontend/src/components/layouts/AppLayout.tsx"
if [ -f "$APP_LAYOUT_FILE" ]; then
  sed -n '1,220p' "$APP_LAYOUT_FILE" | cat -n
else
  echo "Missing $APP_LAYOUT_FILE"
fi

# Also inspect any generic layout wrapper that might add px, e.g., TwoColumnFullScreenLayout
for f in frontend/src/components/layouts/TwoColumnFullScreenLayout.tsx \
         frontend/src/components/layouts/SettingsLayout.tsx \
         frontend/src/components/layouts/WalletLayout.tsx; do
  if [ -f "$f" ]; then
    echo "== $f =="
    sed -n '1,260p' "$f" | cat -n
  fi
done

Repository: getAlby/hub

Length of output: 1988

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Show where AppLayout is used in routes.tsx
rg -n "AppLayout" frontend/src/routes.tsx

FIRST_MATCH_LINE=$(rg -n "AppLayout" frontend/src/routes.tsx | head -n 1 | cut -d: -f1)
START=$((FIRST_MATCH_LINE-120))
if [ "$START" -lt 1 ]; then START=1; fi
END=$((FIRST_MATCH_LINE+120))

echo "== routes.tsx around AppLayout match (lines $START-$END) =="
sed -n "${START},${END}p" frontend/src/routes.tsx | cat -n

# Inspect AppLayout implementation + common layout wrappers
for f in \
  frontend/src/components/layouts/AppLayout.tsx \
  frontend/src/components/layouts/TwoColumnFullScreenLayout.tsx \
  frontend/src/components/layouts/SettingsLayout.tsx \
  frontend/src/components/layouts/WalletLayout.tsx
do
  if [ -f "$f" ]; then
    echo "== $(basename "$f") =="; sed -n '1,260p' "$f" | cat -n
  fi
done

Repository: getAlby/hub

Length of output: 27389

Check Tabs spacing after switching from padding/margins to gap-4

frontend/src/components/ui/tabs.tsx makes the default Tabs orientation (orientation="horizontal") render as a flex container with flex-col, and the passed className="gap-4" overrides the default gap-2. So the spacing between <TabsList> and <TabsContent> is now controlled by a fixed 16px gap.

Since this removes the prior responsive mb-2 lg:mb-6 behavior (if that was on <TabsList>), confirm the vertical rhythm matches across breakpoints. Also, removing px-2 lg:px-0 on <Tabs> should still leave overall horizontal padding from AppLayout’s p-4; confirm alignment on mobile is unchanged.

<Tabs value={tab} onValueChange={setTab} className="gap-4">
  <TabsList>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/screens/apps/Connections.tsx` around lines 44 - 45, The Tabs
spacing change removed the previous responsive vertical rhythm and horizontal
padding—update the Tabs/TabsList usage so spacing matches previous behavior
across breakpoints: either replace the fixed className="gap-4" on Tabs with
responsive gap classes (e.g., gap-2 lg:gap-6) or re-add the prior responsive
margins on TabsList (e.g., mb-2 lg:mb-6) and ensure Tabs retains appropriate
horizontal padding (px-2 lg:px-0) so alignment with AppLayout's p-4 on mobile
remains unchanged; adjust in the component where Tabs, TabsList and TabsContent
are rendered to restore responsive spacing.

<TabsTrigger value="app-store" className="flex gap-2 items-center">
<LayoutGridIcon className="w-5 h-5" /> App Store
</TabsTrigger>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/screens/appstore/AppStoreDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ function AppStoreDetailInternal({ appStoreApp }: { appStoreApp: AppStoreApp }) {
}

return (
<div className="grid gap-3">
<div className="grid gap-4">
<AppStoreDetailHeader appStoreApp={appStoreApp} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<AboutAppCard appStoreApp={appStoreApp} />
<AppLinksCard appStoreApp={appStoreApp} />
{/* <Card>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/channels/Channels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ export default function Channels() {

<div
className={cn(
"flex flex-col sm:flex-row flex-wrap gap-3 slashed-zero"
"flex flex-col sm:flex-row flex-wrap gap-4 slashed-zero"
)}
>
<Card className="flex flex-1 sm:flex-2 flex-col">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/internal-apps/Tictactoe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export function Tictactoe() {
{!!tictactoeApps?.length && (
<>
<h2 className="font-semibold text-xl">Tic Tac Toe connections</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
{tictactoeApps.map((app, index) => (
<AppCard key={index} app={app} />
))}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/screens/internal-apps/ZapPlanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,7 +515,7 @@ export function ZapPlanner() {
scheduled payment. This allows you to securely setup recurring payments
and be in full control.
</p>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
{recipients.map((recipient) => (
<Card key={recipient.lightningAddress}>
<CardHeader>
Expand Down Expand Up @@ -544,7 +544,7 @@ export function ZapPlanner() {
{!!zapplannerApps?.length && (
<>
<h2 className="font-semibold text-xl">Recurring Payments</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
{zapplannerApps.map((app, index) => (
<AppCard
key={index}
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/screens/subwallets/SubwalletList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function SubwalletList() {
subwalletTotalAmountMsat <= balances.lightning.totalSpendableMsat;

return (
<div className="grid gap-3">
<div className="grid gap-4">
<AppHeader
title="Sub-wallets"
pageTitle="Sub-wallets"
Expand Down Expand Up @@ -148,7 +148,7 @@ export function SubwalletList() {
</Alert>
)}

<div className="flex flex-col sm:flex-row flex-wrap gap-3 slashed-zero">
<div className="flex flex-col sm:flex-row flex-wrap gap-4 slashed-zero">
<Card className="flex flex-1 flex-col">
<CardHeader className="pb-2">
<CardTitle className="text-lg">
Expand Down Expand Up @@ -191,11 +191,11 @@ export function SubwalletList() {
</CardContent>
</Card>
</div>
<div className="mt-8">
<div>
<h3 className="font-semibold text-2xl mb-4">Managed Sub-wallets</h3>
<div
ref={appsListRef}
className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch"
className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch"
>
{subwalletApps.map((app, index) => (
<AppCard key={index} app={app} />
Expand Down
Loading