feat: update app spacing#2444
Open
Wutche wants to merge 1 commit into
Open
Conversation
Contributor
📝 WalkthroughWalkthroughThis PR standardizes layout spacing across the frontend by updating Tailwind gap utilities from ChangesSpacing Standardization to gap-4
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with 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.
Inline comments:
In `@frontend/src/screens/apps/Connections.tsx`:
- Around line 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.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 37253cf9-e3b2-40a9-8d85-7753891a0a95
📒 Files selected for processing (19)
frontend/src/components/connections/AlbyConnectionCard.tsxfrontend/src/components/connections/AppDetailConnectedApps.tsxfrontend/src/components/connections/AppStore.tsxfrontend/src/components/connections/AppUsage.tsxfrontend/src/components/connections/ConnectedApps.tsxfrontend/src/components/connections/SuggestedApps.tsxfrontend/src/components/layouts/SettingsLayout.tsxfrontend/src/screens/ConnectAlbyAccount.tsxfrontend/src/screens/Home.tsxfrontend/src/screens/ai/AI.tsxfrontend/src/screens/alby/SupportAlby.tsxfrontend/src/screens/apps/AppDetails.tsxfrontend/src/screens/apps/AppsCleanup.tsxfrontend/src/screens/apps/Connections.tsxfrontend/src/screens/appstore/AppStoreDetail.tsxfrontend/src/screens/channels/Channels.tsxfrontend/src/screens/internal-apps/Tictactoe.tsxfrontend/src/screens/internal-apps/ZapPlanner.tsxfrontend/src/screens/subwallets/SubwalletList.tsx
Comment on lines
+44
to
+45
| <Tabs value={tab} onValueChange={setTab} className="gap-4"> | ||
| <TabsList> |
Contributor
There was a problem hiding this comment.
🧩 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.tsxRepository: 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 200Repository: 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 50Repository: 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 -nRepository: 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
doneRepository: 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
doneRepository: 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Updates inner-page layouts and card collections to consistently use 16px spacing across desktop and mobile.
Also removes extra Connections page padding and prevents App Store cards from overflowing on smaller screens.
Fixes #1011
Summary by CodeRabbit