refactor: expose editor panels in small device

apps/client/src/common/components/dialog/Dialog.module.scss

@@ -16,8 +16,22 @@
   border: 1px solid $gray-1200;
 }
 
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
 .title {
-  font-size: 1.25rem;
+  font-size: 1rem;
+  font-weight: 600;
   padding-block: 1rem;
 
   display: flex;

apps/client/src/common/components/dialog/Dialog.tsx

@@ -10,12 +10,21 @@ interface DialogProps {
   isOpen: boolean;
   title: string;
   showCloseButton?: boolean;
+  showBackdrop?: boolean;
   bodyElements: ReactNode;
   footerElements: ReactNode;
   onClose: () => void;
 }
 
-export default function Dialog({ isOpen, title, showCloseButton, bodyElements, footerElements, onClose }: DialogProps) {
+export default function Dialog({
+  isOpen,
+  title,
+  showCloseButton,
+  showBackdrop,
+  bodyElements,
+  footerElements,
+  onClose,
+}: DialogProps) {
   return (
     <BaseDialog.Root
       open={isOpen}
@@ -24,6 +33,7 @@ export default function Dialog({ isOpen, title, showCloseButton, bodyElements, f
       }}
     >
       <BaseDialog.Portal>
+        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
         <BaseDialog.Popup className={style.dialog}>
           <div className={style.title}>
             {title}