Fix

Author: binary-koan

app/javascript/components/BundleEdit/Layout.tsx

@@ -188,7 +188,7 @@ export const Layout = ({
       <div className={preview ? "squished fixed-aside flex-1 lg:grid lg:grid-cols-[1fr_30vw]" : "flex-1"}>
         {children}
         {preview ? (
-          <aside aria-label="Preview">
+          <aside aria-label="Preview" className="!sticky top-0 min-h-screen self-start overflow-y-auto">
             <header>
               <h2>Preview</h2>
               <WithTooltip tip="Preview">

app/javascript/components/PoweredByFooter.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+import { classNames } from "$app/utils/classNames";
+
+export const PoweredByFooter = ({ className }: { className?: string }) => (
+  <footer className={classNames("py-16 text-center", className)}>
+    Powered by <span className="logo-full" />
+  </footer>
+);

app/javascript/components/Product/Layout.tsx

@@ -120,7 +120,11 @@ const SectionEditor = ({
         {sections.map((section, i) => (
           <section key={section.id} id={section.id} className="border-b border-border py-16">
             <AddSectionButton index={i} />
-            {section.id ? <EditSection section={section} /> : children}
+            {section.id ? (
+              <EditSection section={section} />
+            ) : (
+              <div className="mx-auto w-full max-w-6xl">{children}</div>
+            )}
             {i === sections.length - 1 ? <AddSectionButton index={i + 1} position="top" /> : null}
           </section>
         ))}

app/javascript/components/ProductEdit/Layout.tsx

@@ -252,11 +252,7 @@ export const Layout = ({
             <>
               {saveButton}
               <WithTooltip tip={saveButtonTooltip}>
-                <Button
-                  color="accent"
-                  disabled={isBusy}
-                  onClick={() => void setPublished(true).then(() => navigate.current(`${rootPath}/share`))}
-                >
+                <Button color="accent" disabled={isBusy} onClick={() => void setPublished(true)}>
                   {isPublishing ? "Publishing..." : "Publish and continue"}
                 </Button>
               </WithTooltip>
@@ -308,7 +304,7 @@ export const Layout = ({
       <div className={preview ? "squished fixed-aside flex-1 lg:grid lg:grid-cols-[1fr_30vw]" : "flex-1"}>
         {children}
         {preview ? (
-          <aside aria-label="Preview">
+          <aside aria-label="Preview" className="!sticky top-0 min-h-screen self-start overflow-y-auto">
             <header>
               <h2>Preview</h2>
               <WithTooltip tip="Preview">

app/javascript/components/Profile/EditSections.tsx

@@ -282,7 +282,7 @@ export const SectionLayout = ({
         </button>
       </div>
       <div ref={scrollRef} style={{ position: "absolute" }} />
-      {children}
+      <div className="mx-auto w-full max-w-6xl">{children}</div>
     </>
   );
 };

app/javascript/components/server-components/AffiliatesPage.tsx

@@ -460,7 +460,7 @@ const AffiliatesTab = () => {
       }
       navigation={<AffiliatesNavigation />}
     >
-      <div style={{ display: "grid", gap: "var(--spacer-7)" }}>
+      <div className="p-4 lg:p-8" style={{ display: "grid", gap: "var(--spacer-7)" }}>
         {navigation.state === "loading" && affiliates.length === 0 ? (
           <div style={{ justifySelf: "center" }}>
             <Progress width="5rem" />

app/javascript/components/server-components/GenerateInvoicePage.tsx

@@ -7,6 +7,7 @@ import { assertResponseError } from "$app/utils/request";
 import { register } from "$app/utils/serverComponentUtil";
 
 import { Button } from "$app/components/Button";
+import { PoweredByFooter } from "$app/components/PoweredByFooter";
 import { showAlert } from "$app/components/server-components/Alert";
 
 type FieldState = { value: string; error?: boolean };
@@ -270,9 +271,7 @@ const GenerateInvoicePage = ({
           </Button>
         </footer>
       </div>
-      <footer style={{ textAlign: "center", padding: "var(--spacer-4)" }}>
-        Powered by <span className="logo-full" />
-      </footer>
+      <PoweredByFooter />
     </>
   );
 };

app/javascript/components/server-components/Product/IframePage.tsx

@@ -3,6 +3,7 @@ import { createCast } from "ts-safe-cast";
 
 import { register } from "$app/utils/serverComponentUtil";
 
+import { PoweredByFooter } from "$app/components/PoweredByFooter";
 import { Product, useSelectionFromUrl, Props as ProductProps } from "$app/components/Product";
 import { useElementDimensions } from "$app/components/useElementDimensions";
 import { useRunOnce } from "$app/components/useRunOnce";
@@ -29,9 +30,7 @@ const IframePage = (props: ProductProps) => {
             ctaLabel="Add to cart"
           />
         </section>
-        <footer style={{ borderTop: "none", padding: 0 }}>
-          Powered by <span className="logo-full" />
-        </footer>
+        <PoweredByFooter className="p-0" />
       </div>
     </div>
   );

app/javascript/components/server-components/Product/index.tsx

@@ -3,14 +3,13 @@ import { createCast } from "ts-safe-cast";
 
 import { register } from "$app/utils/serverComponentUtil";
 
+import { PoweredByFooter } from "$app/components/PoweredByFooter";
 import { Layout, Props } from "$app/components/Product/Layout";
 
 const ProductPage = (props: Props) => (
-  <div className="custom-sections mx-auto w-full max-w-6xl">
+  <div className="custom-sections">
     <Layout {...props} />
-    <footer>
-      Powered by <span className="logo-full" />
-    </footer>
+    <PoweredByFooter />
   </div>
 );
 

app/javascript/components/server-components/Purchase/ProductPage.tsx

@@ -3,6 +3,7 @@ import { createCast } from "ts-safe-cast";
 
 import { register } from "$app/utils/serverComponentUtil";
 
+import { PoweredByFooter } from "$app/components/PoweredByFooter";
 import { Product, useSelectionFromUrl, Props as ProductProps } from "$app/components/Product";
 
 const PurchaseProductPage = (props: ProductProps) => {
@@ -14,9 +15,7 @@ const PurchaseProductPage = (props: ProductProps) => {
         <section>
           <Product {...props} selection={selection} setSelection={setSelection} />
         </section>
-        <footer style={{ borderTop: "none", padding: 0 }}>
-          Powered by <span className="logo-full" />
-        </footer>
+        <PoweredByFooter className="p-0" />
       </div>
     </div>
   );