Skip to content

fix: card size #1480

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

Merged
merged 4 commits into from
Mar 26, 2025
Merged

fix: card size #1480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b0885ac
fix: change card image and height
RobChangCA Mar 25, 2025
5177732
fix: remove xl padding
RobChangCA Mar 25, 2025
0cbfffa
fix: cards align start
RobChangCA Mar 25, 2025
f241671
Merge branch 'main' into rob/card-size
RobChangCA Mar 26, 2025
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
4 changes: 2 additions & 2 deletions examples/ui-demo/src/components/preview/PreviewWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ export function PreviewWrapper({ showCode }: { showCode: boolean }) {
{/* Don't unmount when showing code preview so that the auth card retains its state */}
<div
className={cn(
"flex flex-col flex-1 overflow-y-auto scrollbar-none relative p-3 lg:p-6",
"flex flex-col flex-1 overflow-y-auto scrollbar-none relative p-3 lg:p-6 xl:py-0",
showCode && "hidden"
)}
>
<div className="flex flex-1 justify-center items-start lg:items-center ">
<div className="flex flex-1 justify-center items-start">
<RenderContent />
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions examples/ui-demo/src/components/small-cards/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ export function Card({
badgeSlot?: React.ReactNode;
}) {
return (
<div className="bg-bg-surface-default rounded-lg p-4 w-full xl:p-6 xl:w-[326px] xl:h-[570px] flex flex-col border hover:border-fg-tertiary mb-5 xl:mb-0 min-h-[220px]">
<div className="bg-bg-surface-default rounded-lg p-4 w-full xl:p-6 xl:w-[326px] xl:h-[490px] flex flex-col border hover:border-fg-tertiary mb-5 xl:mb-0 min-h-[220px]">
<div className="flex xl:flex-col gap-4 relative">
<div className="absolute top-[-6px] left-[-6px] sm:top-1 sm:left-1 xl:left-auto xl:right-3 xl:top-3 z-10">
{badgeSlot}
</div>
<div className="flex-shrink-0 sm:mb-3 xl:mb-0 rounded-lg overflow-hidden flex items-center justify-center h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[222px] xl:w-full">
<div className="flex-shrink-0 sm:mb-3 xl:mb-0 rounded-lg overflow-hidden flex items-center justify-center h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[150px] xl:w-full">
{imageSlot}
</div>
<div className="w-full mb-3">
Expand Down