UI: Overhaul layout engine

code/addons/viewport/src/Tool.tsx

@@ -48,8 +48,6 @@ const toLinks = memoize(50)((list: ViewportItem[], active: LinkBase, set, state,
     });
 });
 
-const wrapperId = 'storybook-preview-wrapper';
-
 interface LinkBase {
   id: string;
   title: string;
@@ -202,25 +200,29 @@ export const ViewportTool: FC = memo(
             <Global
               styles={{
                 [`iframe[data-is-storybook="true"]`]: {
-                  margin: `auto`,
-                  transition: 'none',
-                  position: 'relative',
-                  border: `1px solid black`,
-                  boxShadow: '0 0 100px 100vw rgba(0,0,0,0.5)',
-
-                  ...styles,
-                },
-                [`#${wrapperId}`]: {
-                  padding: theme.layoutMargin,
-                  alignContent: 'center',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  justifyItems: 'center',
-                  overflow: 'auto',
-
-                  display: 'grid',
-                  gridTemplateColumns: '100%',
-                  gridTemplateRows: '100%',
+                  ...(styles || {
+                    width: '100%',
+                    height: '100%',
+                  }),
+                  //   margin: `auto`,
+                  //   transition: 'none',
+                  //   position: 'relative',
+                  //   border: `1px solid black`,
+                  //   boxShadow: '0 0 100px 100vw rgba(0,0,0,0.5)',
+
+                  //   ...styles,
+                  // },
+                  // [`#${wrapperId}`]: {
+                  //   padding: theme.layoutMargin,
+                  //   alignContent: 'center',
+                  //   alignItems: 'center',
+                  //   justifyContent: 'center',
+                  //   justifyItems: 'center',
+                  //   overflow: 'auto',
+
+                  //   display: 'grid',
+                  //   gridTemplateColumns: '100%',
+                  //   gridTemplateRows: '100%',
                 },
               }}
             />

code/e2e-tests/util.ts

@@ -65,8 +65,9 @@ export class SbPage {
       const storeState = {
         layout: {
           showToolbar: true,
-          showNav: true,
-          showPanel: true,
+          navSize: 300,
+          bottomPanelHeight: 300,
+          rightPanelWidth: 300,
         },
       };
       window.sessionStorage.setItem('@storybook/manager/store', JSON.stringify(storeState));

code/lib/manager-api/src/index.tsx

@@ -288,25 +288,25 @@ function ManagerConsumer<P = Combo>({
   filter = defaultFilter,
   children,
 }: ManagerConsumerProps<P>): ReactElement {
-  const c = useContext(ManagerContext);
+  const managerContext = useContext(ManagerContext);
   const renderer = useRef(children);
   const filterer = useRef(filter);
 
   if (typeof renderer.current !== 'function') {
     return <Fragment>{renderer.current}</Fragment>;
   }
 
-  const data = filterer.current(c);
+  const comboData = filterer.current(managerContext);
 
-  const l = useMemo(() => {
-    return [...Object.entries(data).reduce((acc, keyval) => acc.concat(keyval), [])];
-  }, [c.state]);
+  const comboDataArray = useMemo(() => {
+    return [...Object.entries(comboData).reduce((acc, keyval) => acc.concat(keyval), [])];
+  }, [managerContext.state]);
 
   return useMemo(() => {
     const Child = renderer.current as FC<P>;
 
-    return <Child {...data} />;
-  }, l);
+    return <Child {...comboData} />;
+  }, comboDataArray);
 }
 
 export function useStorybookState(): State {