crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust layout to fit within mobile view

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-04-16 20:13:21 +07:00
parent b08cf040ce
commit af8739d695
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
6 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -35,7 +35,7 @@ export const metadata = {
export default async function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={GeistSans.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<body className="min-w-fit overflow-auto bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<header>
<Banner />
<Navbar />

2
components/banner.tsx
View File

@ -3,7 +3,7 @@ import Tooltip from './tooltip';
function Banner() {
return (
<div className="flex h-10 w-full items-center justify-center gap-x-8 bg-primary text-sm font-medium text-dark">
<div className="flex min-h-10 w-full flex-col items-center justify-center gap-x-8 bg-primary p-2 text-sm font-medium text-dark md:flex-row md:p-0">
<span>
Speak to a Specialist Now:{' '}
<a href={`tel:${8882422605}`} className="ml-1">

4
components/layout/footer.tsx
View File

@ -28,7 +28,7 @@ export default async function Footer() {
</a>
<p className="ml-4">Monday - Friday 9:00am - 8:00pm EST</p>
<p className="ml-4">Saturday 11:00am - 4:00pm EST</p>
<div className="ml-4 mt-3 flex flex-row items-center gap-4">
{/* <div className="ml-4 mt-3 flex flex-row items-center gap-4">
<a href="https://www.facebook.com/carpartplanet" target="_blank" rel="noreferrer">
<Image alt="facebook" src="/icons/facebook.png" width={20} height={20} />
</a>
@ -54,7 +54,7 @@ export default async function Footer() {
<a href="https://twitter.com/carpartplanet" target="_blank" rel="noreferrer">
<Image alt="twitter" src="/icons/twitter.png" width={16} height={16} />
</a>
</div>
</div> */}
</div>
<Suspense
fallback={

6
components/layout/navbar/index.tsx
View File

@ -29,7 +29,7 @@ export default async function Navbar() {
className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
>
<LogoSquare />
<div className="flex-none text-sm font-medium uppercase md:hidden lg:block">
<div className="flex-none text-sm font-medium uppercase md:hidden lg:block lg:text-lg">
{SITE_NAME}
</div>
</Link>
@ -39,7 +39,7 @@ export default async function Navbar() {
<Search />
</Suspense>
</div>
<div className="flex justify-end gap-3 md:w-1/3">
<div className="flex justify-end gap-5 pr-2 md:w-1/3">
<Suspense fallback={<OpenProfile />}>
<Profile />
</Suspense>
@ -51,7 +51,7 @@ export default async function Navbar() {
{menu.length ? (
<div className="hidden w-full items-center justify-center border-b py-3 md:flex">
<ul className="hidden gap-7 text-sm md:flex md:items-center">
<ul className="hidden gap-10 text-sm font-medium md:flex md:items-center lg:gap-16">
{menu.map((item: Menu) => (
<li key={item.title}>
<Link

2
components/logo-square.tsx
View File

@ -4,7 +4,7 @@ import LogoIcon from './icons/logo';
export default function LogoSquare() {
return (
<div className={clsx('flex h-[40px] w-[40px] flex-none items-center justify-center')}>
<LogoIcon className="h-[16px] w-[16px]" />
<LogoIcon className="h-[20px] w-[20px] lg:h-[24px] lg:w-[24px]" />
</div>
);
}

2
components/profile/popover.tsx
View File

@ -25,7 +25,7 @@ const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute right-0 z-10 mt-2 w-auto min-w-48 max-w-sm px-4 sm:px-0">
<Popover.Panel className="absolute -right-10 z-10 mt-2 w-72 max-w-lg px-4 sm:px-0 lg:right-0">
<div className="flex flex-col gap-2 overflow-hidden rounded-md bg-white px-4 py-3 shadow-lg ring-1 ring-black/5">
<span className="text-sm font-medium">My Account</span>
<a