chore: tweak padding

This commit is contained in:
Steven 2023-12-19 21:44:40 +08:00
parent 6290234ad1
commit b575064d47
13 changed files with 17 additions and 17 deletions

View file

@ -4,7 +4,7 @@ import UsageHeatMap from "./UsageHeatMap";
const HomeSidebar = () => {
return (
<aside className="relative w-full pr-2 h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4">
<aside className="relative w-full pr-2 h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 sm:pt-6">
<div className="px-4 pr-8 mb-4 w-full">
<SearchBar />
</div>

View file

@ -98,9 +98,9 @@ const Navigation = () => {
: [exploreNavLink, signInNavLink];
return (
<header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 z-30">
<header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 sm:pt-6 z-30">
<UserBanner />
<div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
<div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
{navLinks.map((navLink) => (
<NavLink
key={navLink.id}

View file

@ -33,7 +33,7 @@ const UserBanner = () => {
};
return (
<div className="relative w-full h-auto px-2 shrink-0">
<div className="relative w-full h-auto px-1 shrink-0">
<Dropdown
className="w-auto"
trigger={

View file

@ -7,9 +7,9 @@ function Root() {
return (
<div className="w-full min-h-full">
<div className="w-full sm:pl-56 mx-auto flex flex-row justify-center items-start">
<div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
{sm && (
<div className="hidden sm:block fixed top-0 left-0 w-56 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl">
<div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl">
<Navigation />
</div>
)}

View file

@ -30,7 +30,7 @@ const Archived = () => {
}, [memos]);
return (
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-4 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
{loadingState.isLoading ? (

View file

@ -54,7 +54,7 @@ const Explore = () => {
};
return (
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<MobileHeader />
<div className="relative w-full h-auto flex flex-col justify-start items-start px-4">
<MemoFilter />

View file

@ -9,10 +9,10 @@ const Home = () => {
const { md } = useResponsiveWidth();
return (
<div className="w-full max-w-4xl flex flex-row justify-center items-start">
<div className="w-full sm:pt-4">
<div className="w-full max-w-5xl flex flex-row justify-center items-start">
<div className="w-full sm:pt-6">
<MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
<div className="w-full px-4 md:pr-2">
<div className="w-full px-4 sm:px-6 md:pr-2">
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />
<MemoList />
</div>

View file

@ -20,7 +20,7 @@ const Inboxes = () => {
}, []);
return (
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">

View file

@ -110,7 +110,7 @@ const MemoDetail = () => {
};
return (
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">

View file

@ -66,7 +66,7 @@ const Resources = () => {
};
return (
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">

View file

@ -42,7 +42,7 @@ const Setting = () => {
};
return (
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-4 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="setting-page-wrapper">

View file

@ -64,7 +64,7 @@ const Timeline = () => {
};
return (
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">

View file

@ -35,7 +35,7 @@ const UserProfile = () => {
}, [params.username]);
return (
<section className="w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4 flex flex-col justify-start items-center">
{!loadingState.isLoading &&