fix(builderpage): resolve section-dialog height overflow for mobile a…

…nd adjust sidebar font and spacing styles
AmruthPillai · Dec 1, 2024 · d84aeee · d84aeee
1 parent e29f973
commit d84aeee
Show file tree

Hide file tree

Showing 16 changed files with 60 additions and 50 deletions.
diff --git a/apps/client/src/pages/builder/sidebars/left/index.tsx b/apps/client/src/pages/builder/sidebars/left/index.tsx
@@ -161,7 +161,7 @@ export const LeftSidebar = () => {
       </div>
 
       <ScrollArea orientation="vertical" className="h-screen flex-1 pb-16 lg:pb-0">
-        <div ref={containterRef} className="grid gap-y-6 p-6 @container/left">
+        <div ref={containterRef} className="grid gap-y-10 p-6 @container/left">
           <BasicsSection />
           <Separator />
           <SummarySection />

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/basics.tsx b/apps/client/src/pages/builder/sidebars/left/sections/basics.tsx
@@ -18,7 +18,7 @@ export const BasicsSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("basics")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Basics`}</h2>
+          <h2 className="line-clamp-1 text-2xl  font-bold lg:text-3xl">{t`Basics`}</h2>
         </div>
       </header>
 
@@ -27,7 +27,7 @@ export const BasicsSection = () => {
           <PictureSection />
         </div>
 
-        <div className="space-y-1.5 sm:col-span-2">
+        <div className="space-y-4 sm:col-span-2">
           <Label htmlFor="basics.name">{t`Full Name`}</Label>
           <Input
             id="basics.name"

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
@@ -97,7 +97,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
         <div className="flex items-center gap-x-4">
           {getSectionIcon(id)}
 
-          <h2 className="line-clamp-1 text-3xl font-bold">{section.name}</h2>
+          <h2 className="line-clamp-1  text-2xl font-bold lg:text-3xl">{section.name}</h2>
         </div>
 
         <div className="flex items-center gap-x-2">
@@ -158,7 +158,11 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
 
       {section.items.length > 0 && (
         <footer className="flex items-center justify-end">
-          <Button variant="outline" className="ml-auto gap-x-2" onClick={onCreate}>
+          <Button
+            variant="outline"
+            className="ml-auto gap-x-2 text-xs lg:text-sm"
+            onClick={onCreate}
+          >
             <Plus />
             <span>
               {t({

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx
@@ -18,6 +18,7 @@ import {
   DialogHeader,
   DialogTitle,
   Form,
+  ScrollArea,
 } from "@reactive-resume/ui";
 import { produce } from "immer";
 import get from "lodash.get";
@@ -144,32 +145,37 @@ export const SectionDialog = <T extends SectionItem>({
     <Dialog open={isOpen} onOpenChange={close}>
       <DialogContent className="z-50">
         <Form {...form}>
-          <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
-            <DialogHeader>
-              <DialogTitle>
-                <div className="flex items-center space-x-2.5">
-                  {isCreate && <Plus />}
-                  {isUpdate && <PencilSimple />}
-                  {isDuplicate && <CopySimple />}
-                  <h2>
-                    {isCreate && t`Create a new item`}
-                    {isUpdate && t`Update an existing item`}
-                    {isDuplicate && t`Duplicate an existing item`}
-                  </h2>
-                </div>
-              </DialogTitle>
-            </DialogHeader>
-
-            {children}
-
-            <DialogFooter>
-              <Button type="submit">
-                {isCreate && t`Create`}
-                {isUpdate && t`Save Changes`}
-                {isDuplicate && t`Duplicate`}
-              </Button>
-            </DialogFooter>
-          </form>
+          <ScrollArea>
+            <form
+              className=" max-h-[60vh] space-y-6 lg:max-h-fit"
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
+              <DialogHeader>
+                <DialogTitle>
+                  <div className="flex items-center space-x-2.5">
+                    {isCreate && <Plus />}
+                    {isUpdate && <PencilSimple />}
+                    {isDuplicate && <CopySimple />}
+                    <h2>
+                      {isCreate && t`Create a new item`}
+                      {isUpdate && t`Update an existing item`}
+                      {isDuplicate && t`Duplicate an existing item`}
+                    </h2>
+                  </div>
+                </DialogTitle>
+              </DialogHeader>
+
+              {children}
+
+              <DialogFooter>
+                <Button type="submit">
+                  {isCreate && t`Create`}
+                  {isUpdate && t`Save Changes`}
+                  {isDuplicate && t`Duplicate`}
+                </Button>
+              </DialogFooter>
+            </form>
+          </ScrollArea>
         </Form>
       </DialogContent>
     </Dialog>

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx
@@ -82,7 +82,7 @@ export const SectionOptions = ({ id }: Props) => {
           <List weight="bold" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-48">
+      <DropdownMenuContent className="mr-4 w-48 ">
         {hasItems && (
           <>
             <DropdownMenuItem onClick={onCreate}>

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/summary.tsx b/apps/client/src/pages/builder/sidebars/left/sections/summary.tsx
@@ -20,7 +20,7 @@ export const SummarySection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("summary")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{section.name}</h2>
+          <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
         </div>
 
         <div className="flex items-center gap-x-2">

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/export.tsx b/apps/client/src/pages/builder/sidebars/right/sections/export.tsx
@@ -37,7 +37,7 @@ export const ExportSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("export")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Export`}</h2>
+          <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Export`}</h2>
         </div>
       </header>
 

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/information.tsx b/apps/client/src/pages/builder/sidebars/right/sections/information.tsx
@@ -114,7 +114,7 @@ export const InformationSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("information")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Information`}</h2>
+          <h2 className="line-clamp-1 text-2xl font-bold  lg:text-3xl">{t`Information`}</h2>
         </div>
       </header>
 

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/layout.tsx b/apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
@@ -204,7 +204,7 @@ export const LayoutSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("layout")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Layout`}</h2>
+          <h2 className="line-clamp-1 text-2xl  font-bold lg:text-3xl">{t`Layout`}</h2>
         </div>
 
         <Tooltip content={t`Reset Layout`}>
@@ -268,7 +268,7 @@ export const LayoutSection = () => {
 
         <Button variant="outline" className="ml-auto" onClick={onAddPage}>
           <Plus />
-          <span className="ml-2">{t`Add New Page`}</span>
+          <span className="ml-2 text-xs lg:text-sm">{t`Add New Page`}</span>
         </Button>
       </main>
     </section>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/notes.tsx b/apps/client/src/pages/builder/sidebars/right/sections/notes.tsx
@@ -14,7 +14,7 @@ export const NotesSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("notes")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Notes`}</h2>
+          <h2 className="line-clamp-1 text-2xl  font-bold lg:text-3xl">{t`Notes`}</h2>
         </div>
       </header>
 

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/page.tsx b/apps/client/src/pages/builder/sidebars/right/sections/page.tsx
@@ -23,11 +23,11 @@ export const PageSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("page")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Page`}</h2>
+          <h2 className="line-clamp-1  text-2xl  font-bold lg:text-3xl">{t`Page`}</h2>
         </div>
       </header>
 
-      <main className="grid gap-y-4">
+      <main className="grid gap-y-6">
         <div className="space-y-1.5">
           <Label>{t`Format`}</Label>
           <Select

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx b/apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
@@ -36,7 +36,7 @@ export const SharingSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("sharing")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Sharing`}</h2>
+          <h2 className="line-clamp-1 text-2xl  font-bold lg:text-3xl">{t`Sharing`}</h2>
         </div>
       </header>
 

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx b/apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
@@ -20,7 +20,7 @@ export const StatisticsSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("statistics")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Statistics`}</h2>
+          <h2 className="line-clamp-1 text-2xl  font-bold lg:text-3xl">{t`Statistics`}</h2>
         </div>
       </header>
 

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/template.tsx b/apps/client/src/pages/builder/sidebars/right/sections/template.tsx
@@ -16,11 +16,11 @@ export const TemplateSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("template")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Template`}</h2>
+          <h2 className="line-clamp-1 text-2xl  font-bold lg:text-3xl">{t`Template`}</h2>
         </div>
       </header>
 
-      <main className="grid grid-cols-2 gap-5 @lg/right:grid-cols-3 @2xl/right:grid-cols-4">
+      <main className="grid grid-cols-2 gap-8 @lg/right:grid-cols-3 @2xl/right:grid-cols-4">
         {templatesList.map((template, index) => (
           <AspectRatio key={template} ratio={1 / 1.4142}>
             <motion.div

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/theme.tsx b/apps/client/src/pages/builder/sidebars/right/sections/theme.tsx
@@ -17,11 +17,11 @@ export const ThemeSection = () => {
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("theme")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Theme`}</h2>
+          <h2 className="line-clamp-1 text-2xl  font-bold lg:text-3xl">{t`Theme`}</h2>
         </div>
       </header>
 
-      <main className="grid gap-y-4">
+      <main className="grid gap-y-6">
         <div className="mb-2 grid grid-cols-6 flex-wrap justify-items-center gap-y-4 @xs/right:grid-cols-9">
           {colors.map((color) => (
             <div

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/typography.tsx b/apps/client/src/pages/builder/sidebars/right/sections/typography.tsx
@@ -58,15 +58,15 @@ export const TypographySection = () => {
   }, [typography.font.family]);
 
   return (
-    <section id="typography" className="grid gap-y-6">
+    <section id="typography" className="grid gap-y-8">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
           {getSectionIcon("typography")}
-          <h2 className="line-clamp-1 text-3xl font-bold">{t`Typography`}</h2>
+          <h2 className="line-clamp-1 text-2xl  font-bold lg:text-3xl">{t`Typography`}</h2>
         </div>
       </header>
 
-      <main className="grid gap-y-4">
+      <main className="grid gap-y-8">
         <div className="grid grid-cols-2 gap-4">
           {fontSuggestions.map((font) => (
             <Button
@@ -75,7 +75,7 @@ export const TypographySection = () => {
               style={{ fontFamily: font }}
               disabled={typography.font.family === font}
               className={cn(
-                "flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",
+                "flex h-12 items-center justify-center overflow-hidden rounded border text-center text-xs ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100 lg:text-sm",
                 typography.font.family === font && "ring-1",
               )}
               onClick={() => {