From 889b4c7a91f1a9b95c9fd7d4b3cdb20b2ee4946b Mon Sep 17 00:00:00 2001
From: monospaced <scott@monospaced.com>
Date: Thu, 16 Nov 2023 11:58:05 +0000
Subject: [PATCH] feat: improve responsive behaviour

---
 .../core/components/ComponentList/index.tsx   |   2 +-
 .../ComponentList/styles.module.css           |   7 +-
 .../fields/ArrayField/styles.module.css       |   9 +-
 .../components/InputOrGroup/styles.module.css |   2 +-
 packages/core/components/LayerTree/index.tsx  |   2 +-
 .../components/LayerTree/styles.module.css    |  19 ++-
 .../components/OutlineList/styles.module.css  |   3 +-
 packages/core/components/Puck/index.tsx       | 154 +++++-------------
 .../core/components/Puck/styles.module.css    | 151 +++++++++++++++++
 .../SidebarSection/styles.module.css          |   4 +
 .../src/HeadingAnalyzer.tsx                   |   2 +-
 11 files changed, 221 insertions(+), 134 deletions(-)
 create mode 100644 packages/core/components/Puck/styles.module.css

diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
index 7c3d06afed..e1fd9de623 100644
--- a/packages/core/components/ComponentList/index.tsx
+++ b/packages/core/components/ComponentList/index.tsx
@@ -31,7 +31,7 @@ const ComponentListItem = ({
       >
         {() => (
           <>
-            {component}
+            <div className={getClassNameItem("name")}>{component}</div>
             <div className={getClassNameItem("icon")}>
               <DragIcon />
             </div>
diff --git a/packages/core/components/ComponentList/styles.module.css b/packages/core/components/ComponentList/styles.module.css
index 83d3e2758e..b3760fef22 100644
--- a/packages/core/components/ComponentList/styles.module.css
+++ b/packages/core/components/ComponentList/styles.module.css
@@ -53,13 +53,14 @@
   font-size: var(--puck-font-size-xxs);
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
   cursor: grab;
   margin-bottom: 12px;
 }
 
-.ComponentListItemIcon {
-  color: var(--puck-color-grey-4);
+.ComponentListItem-name {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ComponentList:not(.ComponentList--isDraggingFrom)
diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css b/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css
index e5aa7ae580..71101d946e 100644
--- a/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css
+++ b/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css
@@ -73,10 +73,11 @@
   color: var(--puck-color-grey-3);
   display: flex;
   align-items: center;
+  gap: 2px;
   justify-content: space-between;
   font-size: var(--puck-font-size-xxs);
   list-style: none;
-  padding: 12px 16px;
+  padding: 12px 15px;
   position: relative;
   overflow: hidden;
 }
@@ -114,18 +115,18 @@
   border: none;
   border-top: 1px solid var(--puck-color-grey-8);
   margin: 0;
-  padding: 16px;
+  padding: 16px 15px;
 }
 
 .ArrayFieldItem-rhs {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
 }
 
 .ArrayFieldItem-actions {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   opacity: 0;
 }
 
diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
index 402569f867..e5ee010b94 100644
--- a/packages/core/components/InputOrGroup/styles.module.css
+++ b/packages/core/components/InputOrGroup/styles.module.css
@@ -48,7 +48,7 @@
   border-color: var(--puck-color-grey-8);
   border-radius: 4px;
   font-family: inherit;
-  padding: 12px 16px;
+  padding: 12px 15px;
   width: 100%;
 }
 
diff --git a/packages/core/components/LayerTree/index.tsx b/packages/core/components/LayerTree/index.tsx
index a42f73b4e9..9f332249f8 100644
--- a/packages/core/components/LayerTree/index.tsx
+++ b/packages/core/components/LayerTree/index.tsx
@@ -128,7 +128,7 @@ export const LayerTree = ({
                         <Grid size="16" />
                       )}
                     </div>
-                    {item.type}
+                    <div className={getClassNameLayer("name")}>{item.type}</div>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/components/LayerTree/styles.module.css b/packages/core/components/LayerTree/styles.module.css
index 522f3cde1e..bce29ad38c 100644
--- a/packages/core/components/LayerTree/styles.module.css
+++ b/packages/core/components/LayerTree/styles.module.css
@@ -27,13 +27,13 @@
 }
 
 .Layer-inner {
-  padding-left: 20px;
-  padding-right: 8px;
-  border-radius: 3px;
+  padding-left: 12px;
+  padding-right: 4px;
+  border-radius: 4px;
 }
 
 .Layer--containsZone > .Layer-inner {
-  padding-left: 8px;
+  padding-left: 0;
 }
 
 .Layer-clickable {
@@ -69,7 +69,7 @@
 
 .Layer-zones {
   display: none;
-  margin-left: 20px;
+  margin-left: 12px;
 }
 
 .Layer--isSelected > .Layer-zones,
@@ -78,7 +78,7 @@
 }
 
 .Layer-zones > .LayerTree {
-  margin-left: 16px;
+  margin-left: 12px;
 }
 
 .Layer-title,
@@ -87,6 +87,13 @@
   gap: 8px;
   align-items: center;
   margin: 8px 4px;
+  overflow-x: hidden;
+}
+
+.Layer-name {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .Layer-icon {
diff --git a/packages/core/components/OutlineList/styles.module.css b/packages/core/components/OutlineList/styles.module.css
index d434b43054..40619e44b9 100644
--- a/packages/core/components/OutlineList/styles.module.css
+++ b/packages/core/components/OutlineList/styles.module.css
@@ -2,7 +2,6 @@
   color: var(--puck-color-grey-2);
   font-family: var(--puck-font-stack);
   margin: 0;
-  margin-left: 16px;
   padding-left: 16px;
   position: relative;
   list-style: none;
@@ -39,5 +38,5 @@
 }
 
 .OutlineListItem > .OutlineList {
-  margin: 8px;
+  margin: 8px 0;
 }
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index e68e7054db..f1e14391e7 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -33,10 +33,14 @@ import { LayerTree } from "../LayerTree";
 import { findZonesForArea } from "../../lib/find-zones-for-area";
 import { areaContainsZones } from "../../lib/area-contains-zones";
 import { flushZones } from "../../lib/flush-zones";
+import getClassNameFactory from "../../lib/get-class-name-factory";
 import { usePuckHistory } from "../../lib/use-puck-history";
 import { AppProvider, defaultAppState } from "./context";
 import { useComponentList } from "../../lib/use-component-list";
 import { useResolvedData } from "../../lib/use-resolved-data";
+import styles from "./styles.module.css";
+
+const getClassName = getClassNameFactory("Puck", styles);
 
 const Field = () => {};
 
@@ -270,7 +274,7 @@ export function Puck({
   }, []);
 
   return (
-    <div className="puck">
+    <div>
       <AppProvider
         value={{ state: appState, dispatch, config, componentState }}
       >
@@ -354,31 +358,8 @@ export function Puck({
             <dropZoneContext.Consumer>
               {(ctx) => {
                 return (
-                  <div
-                    style={{
-                      display: "grid",
-                      gridTemplateAreas:
-                        '"header header header" "left editor right"',
-                      gridTemplateColumns: `${
-                        leftSideBarVisible ? "288px" : "0px"
-                      } auto 288px`,
-                      gridTemplateRows: "min-content auto",
-                      height: "100vh",
-                      position: "fixed",
-                      top: 0,
-                      bottom: 0,
-                      left: 0,
-                      right: 0,
-                    }}
-                  >
-                    <header
-                      style={{
-                        gridArea: "header",
-                        color: "var(--puck-color-black)",
-                        background: "var(--puck-color-white)",
-                        borderBottom: "1px solid var(--puck-color-grey-8)",
-                      }}
-                    >
+                  <div className={getClassName({ leftSideBarVisible })}>
+                    <header className={getClassName("header")}>
                       {renderHeader ? (
                         renderHeader({
                           children: (
@@ -395,21 +376,8 @@ export function Puck({
                           state: appState,
                         })
                       ) : (
-                        <div
-                          style={{
-                            display: "grid",
-                            padding: 16,
-                            gridTemplateAreas: '"left middle right"',
-                            gridTemplateColumns: "344px auto 344px",
-                            gridTemplateRows: "auto",
-                          }}
-                        >
-                          <div
-                            style={{
-                              display: "flex",
-                              gap: 16,
-                            }}
-                          >
+                        <div className={getClassName("headerInner")}>
+                          <div className={getClassName("headerToggle")}>
                             <IconButton
                               onClick={() =>
                                 dispatch({
@@ -424,31 +392,20 @@ export function Puck({
                               <Sidebar />
                             </IconButton>
                           </div>
-                          <div
-                            style={{
-                              display: "flex",
-                              justifyContent: "center",
-                              alignItems: "center",
-                            }}
-                          >
+                          <div className={getClassName("headerTitle")}>
                             <Heading rank={2} size="xs">
                               {headerTitle || rootProps.title || "Page"}
                               {headerPath && (
-                                <small
-                                  style={{ fontWeight: 400, marginLeft: 4 }}
-                                >
-                                  <code>{headerPath}</code>
-                                </small>
+                                <>
+                                  {" "}
+                                  <code className={getClassName("headerPath")}>
+                                    {headerPath}
+                                  </code>
+                                </>
                               )}
                             </Heading>
                           </div>
-                          <div
-                            style={{
-                              display: "flex",
-                              gap: 16,
-                              justifyContent: "flex-end",
-                            }}
-                          >
+                          <div className={getClassName("headerTools")}>
                             <div style={{ display: "flex" }}>
                               <IconButton
                                 title="undo"
@@ -479,33 +436,28 @@ export function Puck({
                                 />
                               </IconButton>
                             </div>
-                            {renderHeaderActions &&
-                              renderHeaderActions({
-                                state: appState,
-                                dispatch,
-                              })}
-                            <Button
-                              onClick={() => {
-                                onPublish(data);
-                              }}
-                              icon={<Globe size="14px" />}
-                            >
-                              Publish
-                            </Button>
+                            <div>
+                              {renderHeaderActions &&
+                                renderHeaderActions({
+                                  state: appState,
+                                  dispatch,
+                                })}
+                            </div>
+                            <div>
+                              <Button
+                                onClick={() => {
+                                  onPublish(data);
+                                }}
+                                icon={<Globe size="14px" />}
+                              >
+                                Publish
+                              </Button>
+                            </div>
                           </div>
                         </div>
                       )}
                     </header>
-                    <div
-                      style={{
-                        gridArea: "left",
-                        background: "var(--puck-color-grey-11)",
-                        borderRight: "1px solid var(--puck-color-grey-8)",
-                        overflowY: "auto",
-                        display: "flex",
-                        flexDirection: "column",
-                      }}
-                    >
+                    <div className={getClassName("leftSideBar")}>
                       <SidebarSection title="Components">
                         <ComponentListWrapper>
                           {componentList ? (
@@ -549,30 +501,12 @@ export function Puck({
                       </SidebarSection>
                     </div>
                     <div
-                      style={{
-                        overflowY: "auto",
-                        gridArea: "editor",
-                        position: "relative",
-                        display: "flex",
-                        flexDirection: "column",
-                      }}
+                      className={getClassName("frame")}
                       onClick={() => setItemSelector(null)}
                       id="puck-frame"
                     >
-                      <div
-                        className="puck-root"
-                        style={{
-                          boxShadow:
-                            "0px 0px 0px 32px var(--puck-color-grey-10)",
-                          margin: 32,
-                          zoom: 0.75,
-                        }}
-                      >
-                        <div
-                          style={{
-                            border: "1px solid var(--puck-color-grey-8)",
-                          }}
-                        >
+                      <div className={getClassName("root")}>
+                        <div className={getClassName("page")}>
                           <Page
                             dispatch={dispatch}
                             state={appState}
@@ -591,17 +525,7 @@ export function Puck({
                         }}
                       ></div>
                     </div>
-                    <div
-                      style={{
-                        borderLeft: "1px solid var(--puck-color-grey-8)",
-                        overflowY: "auto",
-                        gridArea: "right",
-                        fontFamily: "var(--puck-font-stack)",
-                        display: "flex",
-                        flexDirection: "column",
-                        background: "var(--puck-color-white)",
-                      }}
-                    >
+                    <div className={getClassName("rightSideBar")}>
                       <FieldWrapper dispatch={dispatch} state={appState}>
                         <SidebarSection
                           noPadding
diff --git a/packages/core/components/Puck/styles.module.css b/packages/core/components/Puck/styles.module.css
new file mode 100644
index 0000000000..b90feacc62
--- /dev/null
+++ b/packages/core/components/Puck/styles.module.css
@@ -0,0 +1,151 @@
+/*
+ * Puck's responsive layout uses minimum viewport widths slightly _below_ common
+ * framework/device breakpoints, and ensures that the width of the resulting
+ * Puck page preview (zoomed at 75%) is slightly _above_ common framework/device
+ * breakpoints. This can help alleviate some of the pain when editing responsive
+ * pages in a preview area that is narrower than the reported viewport width.
+ *
+ * Viewport | Puck page @ zoom 0.75
+ * --------------------------------
+ * 638px    | 321px
+ * 766px    | 321px
+ * 990px    | 604px
+ * 1022px   | 646px
+ * 1198px   | 801px
+ * 1398px   | 1025px
+ * 1598px   | 1212px
+ */
+
+ .Puck {
+  --puck-frame-width: minmax(266px, auto);
+  --puck-side-bar-width: minmax(186px, 250px);
+  --puck-space-px: 16px;
+  bottom: 0;
+  display: grid;
+  grid-template-areas: "header header header" "left editor right";
+  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
+  grid-template-rows: min-content auto;
+  height: 100vh;
+  left: 0;
+  overflow-x: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.Puck--leftSideBarVisible {
+  grid-template-columns:
+    var(--puck-side-bar-width) var(--puck-frame-width)
+    var(--puck-side-bar-width);
+}
+
+@media (min-width: 766px) {
+  .Puck {
+    --puck-frame-width: auto;
+  }
+}
+
+@media (min-width: 990px) {
+  .Puck {
+    --puck-side-bar-width: 256px;
+  }
+}
+
+@media (min-width: 1198px) {
+  .Puck {
+    --puck-side-bar-width: 274px;
+  }
+}
+
+@media (min-width: 1398px) {
+  .Puck {
+    --puck-side-bar-width: 290px;
+  }
+}
+
+@media (min-width: 1598px) {
+  .Puck {
+    --puck-side-bar-width: 320px;
+  }
+}
+
+.Puck-header {
+  background: var(--puck-color-white);
+  border-bottom: 1px solid var(--puck-color-grey-8);
+  color: var(--puck-color-black);
+  grid-area: header;
+}
+
+.Puck-headerInner {
+  align-items: start;
+  display: grid;
+  gap: var(--puck-space-px);
+  grid-template-areas: "left middle right";
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: auto;
+  padding: var(--puck-space-px);
+}
+
+.Puck-headerToggle {
+  padding-top: 2px;
+}
+
+.Puck-headerTitle {
+  align-self: center;
+}
+
+.Puck-headerPath {
+  font-family: var(--puck-font-family-monospaced);
+  font-size: var(--puck-font-size-xxs);
+  font-weight: normal;
+  word-break: break-all;
+}
+
+.Puck-headerTools {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+
+.Puck-leftSideBar {
+  background: var(--puck-color-grey-11);
+  border-right: 1px solid var(--puck-color-grey-8);
+  display: flex;
+  flex-direction: column;
+  grid-area: left;
+  overflow-y: auto;
+}
+
+.Puck-frame {
+  display: flex;
+  flex-direction: column;
+  grid-area: editor;
+  overflow-y: auto;
+  position: relative;
+}
+
+.Puck-root {
+  box-shadow: 0 0 0 calc(var(--puck-space-px) * 2) var(--puck-color-grey-10);
+  margin: var(--puck-space-px);
+  zoom: 0.75;
+}
+
+@media (min-width: 1198px) {
+  .Puck-root {
+    margin: calc(var(--puck-space-px) * 2);
+  }
+}
+
+.Puck-page {
+  border: 1px solid var(--puck-color-grey-8);
+}
+
+.Puck-rightSideBar {
+  background: var(--puck-color-white);
+  border-left: 1px solid var(--puck-color-grey-8);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--puck-font-stack);
+  grid-area: right;
+  overflow-y: auto;
+}
diff --git a/packages/core/components/SidebarSection/styles.module.css b/packages/core/components/SidebarSection/styles.module.css
index 1642796192..f114e6d062 100644
--- a/packages/core/components/SidebarSection/styles.module.css
+++ b/packages/core/components/SidebarSection/styles.module.css
@@ -25,6 +25,10 @@
   padding: 0px;
 }
 
+.SidebarSection--noPadding .SidebarSection-content:last-child {
+  padding-bottom: 4px;
+}
+
 .SidebarSection:last-of-type .SidebarSection-content {
   border-bottom: none;
   flex-grow: 1;
diff --git a/packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx b/packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx
index d1d0f699e7..aa8065add4 100644
--- a/packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx
+++ b/packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx
@@ -16,7 +16,7 @@ const getOutline = ({
   addDataAttr = false,
 }: { addDataAttr?: boolean } = {}) => {
   const headings = window.document
-    .querySelector(".puck-root")!
+    .querySelector("#puck-frame")!
     .querySelectorAll("h1,h2,h3,h4,h5,h6");
 
   const _outline: { rank: number; text: string; analyzeId: string }[] = [];