feat: collapse overlay on small devices

src/components/Settings/Overlay.tsx

@@ -224,9 +224,19 @@ const SettingsOverlay: Component = () => {
     document.removeEventListener("keydown", saveOnCtrlS);
   });
 
+  const AccordionItemLabel: FlowComponent = (props) => (
+    <span class="overflow-hidden whitespace-nowrap hidden xxl:inline-flex group-hover:inline-flex group-focus-within:inline-flex gap-2">
+      {props.children}
+    </span>
+  );
+
+  const AccordionContent: FlowComponent = (props) => (
+    <div class="min-w-[300px]">{props.children}</div>
+  );
+
   return (
     <>
-      <div class="print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 w-[480px] grid-rows-[1fr_auto] gap-4 p-3 transition-all shadow-none hover:shadow-2xl focus-within:shadow-2xl -translate-x-72 opacity-70 hover:opacity-100 focus-within:opacity-100 xxl:opacity-100 xxl:-translate-x-0 hover:translate-x-0 focus-within:translate-x-0 ">
+      <div class="group print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 xxl:w-[480px] grid-rows-[1fr_auto] gap-4 p-1 xxl:p-3 transition-all shadow hover:shadow-2xl focus-within:shadow-2xl outline outline-1 outline-slate-700/10 w-24 hover:w-[480px] focus-within:w-[480px]">
         <div class="overflow-y-scroll">
           <AccordionItem
             item={0}
@@ -234,14 +244,17 @@ const SettingsOverlay: Component = () => {
             label={
               <>
                 <ProjectIcon />
-                Dokument
+                <AccordionItemLabel>Dokument</AccordionItemLabel>
                 <Show when={!documentDataForm.valid}>
+                  <AccordionItemLabel>
                     <WarningIcon class="text-error" />
+                  </AccordionItemLabel>
                 </Show>
               </>
             }
           >
             {/* TODO: Add option for item price decimals */}
+            <AccordionContent>
               <DocumentValidationContext>
                 <AccordionItemGrid>
                   <FullWidthAccordionInput
@@ -259,7 +272,11 @@ const SettingsOverlay: Component = () => {
                     label="Bestellungs Nr."
                     value={state.project.orderNumber}
                     onInput={(evt) =>
-                    setState("project", "orderNumber", evt.currentTarget.value)
+                      setState(
+                        "project",
+                        "orderNumber",
+                        evt.currentTarget.value
+                      )
                     }
                   />
                   <div class="col-span-2">
@@ -288,7 +305,9 @@ const SettingsOverlay: Component = () => {
                       labelMinWidth={fullWidthLabelWidth}
                       label="Lieferdatum"
                       value={state.project.deliveryDate}
-                    onInput={(v: any) => setState("project", "deliveryDate", v)}
+                      onInput={(v: any) =>
+                        setState("project", "deliveryDate", v)
+                      }
                     />
                   </div>
                   <div class="col-span-2">
@@ -358,7 +377,11 @@ const SettingsOverlay: Component = () => {
                       labelSuffixJsx={<MarkdownHelpLabel />}
                       value={state.project.conclusion}
                       onInput={(evt) =>
-                      setState("project", "conclusion", evt.currentTarget.value)
+                        setState(
+                          "project",
+                          "conclusion",
+                          evt.currentTarget.value
+                        )
                       }
                     />
                   </div>
@@ -465,7 +488,9 @@ const SettingsOverlay: Component = () => {
                             <span>|</span>
                             <span>|</span>
                             <span>
-                            <div class="absolute text-right right-0">Gross</div>
+                              <div class="absolute text-right right-0">
+                                Gross
+                              </div>
                               &nbsp;
                             </span>
                           </div>
@@ -475,6 +500,7 @@ const SettingsOverlay: Component = () => {
                   </div>
                 </AccordionItemGrid>
               </DocumentValidationContext>
+            </AccordionContent>
           </AccordionItem>
           <AccordionItem
             item={1}
@@ -482,13 +508,16 @@ const SettingsOverlay: Component = () => {
             label={
               <>
                 <YouIcon />
-                Deine Angaben
+                <AccordionItemLabel>Deine Angaben</AccordionItemLabel>
                 <Show when={!yourDataForm.valid}>
+                  <AccordionItemLabel>
                     <WarningIcon class="text-error" />
+                  </AccordionItemLabel>
                 </Show>
               </>
             }
           >
+            <AccordionContent>
               <YourDataValidationContext>
                 <AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
                 <AccordionItemGrid>
@@ -520,7 +549,10 @@ const SettingsOverlay: Component = () => {
                     type="checkbox"
                     checked={localState.useCustomAddress}
                     onChange={(evt) =>
-                    setLocalState("useCustomAddress", evt.currentTarget.checked)
+                      setLocalState(
+                        "useCustomAddress",
+                        evt.currentTarget.checked
+                      )
                     }
                   />
                 </AccordionItemDivider>
@@ -646,19 +678,24 @@ const SettingsOverlay: Component = () => {
                   </div>
                 </AccordionItemGrid>
               </YourDataValidationContext>
+            </AccordionContent>
           </AccordionItem>
           <AccordionItem
             item={2}
             activeTitleColor="text-emerald-500"
             label={
               <>
-                <CustomerIcon /> Kunde
+                <CustomerIcon />
+                <AccordionItemLabel>Kunde</AccordionItemLabel>
                 <Show when={!customerDataForm.valid}>
+                  <AccordionItemLabel>
                     <WarningIcon class="text-error" />
+                  </AccordionItemLabel>
                 </Show>
               </>
             }
           >
+            <AccordionContent>
               <CustomerValidationContext>
                 <AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
                 <AccordionItemGrid>
@@ -717,6 +754,7 @@ const SettingsOverlay: Component = () => {
                   />
                 </AccordionItemGrid>
               </CustomerValidationContext>
+            </AccordionContent>
           </AccordionItem>
           <AccordionItem
             item={3}
@@ -724,23 +762,27 @@ const SettingsOverlay: Component = () => {
             label={
               <>
                 <PositionsIcon />
-                Positionen
+                <AccordionItemLabel>
-                <small>({state.positions.length})</small>
+                  Positionen <small>({state.positions.length})</small>
+                </AccordionItemLabel>
               </>
             }
           >
+            <AccordionContent>
               <PositionsSettings />
+            </AccordionContent>
           </AccordionItem>
           <AccordionItem
             activeTitleColor="text-blue-500"
             label={
               <>
                 <DesignIcon />
-                Design
+                <AccordionItemLabel>Design</AccordionItemLabel>
               </>
             }
             item={4}
           >
+            <AccordionContent>
               <AccordionItemGrid>
                 <div class="col-span-2">
                   <Checkbox
@@ -766,9 +808,11 @@ const SettingsOverlay: Component = () => {
                   </Checkbox>
                 </div>
               </AccordionItemGrid>
+            </AccordionContent>
           </AccordionItem>
         </div>
-        <div>
+        <div class="overflow-hidden transition-opacity opacity-90 group-hover:opacity-100 group-focus-within:opacity-100 xxl:opacity-100">
+          <AccordionContent>
             <div class="grid grid-cols-2 gap-2 mb-4">
               <button
                 class="btn btn-sm btn-accent shadow-md gap-2"
@@ -893,7 +937,10 @@ const SettingsOverlay: Component = () => {
                     }
                   >
                     {(type) => (
-                    <option value={type} selected={type === uiState.printType}>
+                      <option
+                        value={type}
+                        selected={type === uiState.printType}
+                      >
                         {printTypeTitles[type]}
                       </option>
                     )}
@@ -907,6 +954,7 @@ const SettingsOverlay: Component = () => {
                 </button>
               </div>
             </div>
+          </AccordionContent>
         </div>
       </div>
       <Show when={true}>