fix: main content unnecessary scroll

README.md

@@ -139,11 +139,8 @@ Create sandbox entrypoint in your project, for example in `./src/sandbox.jsx`:
 
 ```jsx
 import { createRoot } from 'react-dom/client';
-// util for validate story-modules
 import { filterValidStories } from '@krutoo/showcase/runtime';
-// component for showing current story
 import { SandboxApp } from '@krutoo/showcase/runtime-sandbox';
-// "stories entrypoint" (trough alias provided by your bundler)
 import foundStories from '#found-stories';
 
 // render your current story to the root element
@@ -162,13 +159,9 @@ Create showcase entrypoint in your project, for example in `./src/showcase.jsx`:
 
 ```jsx
 import { createRoot } from 'react-dom/client';
-// util for validate found stories
 import { filterValidStories } from '@krutoo/showcase/runtime';
-// standalone component for showing documentation with all stories
 import { ShowcaseApp } from '@krutoo/showcase/runtime-showcase';
-// "stories entrypoint" (trough alias, more on that later)
 import foundStories from '#found-stories';
-// showcase app styles bundle
 import '@krutoo/showcase/showcase.css';
 
 // render documentation app wherever you want

docs/docs/runtime/entrypoints.story.mdx

@@ -17,17 +17,14 @@ Create sandbox entrypoint in your project, for example in `./src/sandbox.jsx`:
 
 ```jsx
 import { createRoot } from 'react-dom/client';
-// util for validate story-modules
 import { filterValidStories } from '@krutoo/showcase/runtime';
-// component for showing current story
 import { SandboxApp } from '@krutoo/showcase/runtime-sandbox';
-// "stories entrypoint" (trough alias provided by your bundler)
 import foundStories from '#found-stories';
 
+const { validStories } = filterValidStories(foundStories);
+
 // render your current story to the root element
-createRoot(document.getElementById('root')).render(
-  <SandboxApp stories={filterValidStories(foundStories).validStories} />,
-);
+createRoot(document.getElementById('root')).render(<SandboxApp stories={validStories} />);
 ```
 
 ### Showcase entrypoint
@@ -40,21 +37,15 @@ Create showcase entrypoint in your project, for example in `./src/showcase.jsx`:
 
 ```jsx
 import { createRoot } from 'react-dom/client';
-// util for validate found stories
 import { filterValidStories } from '@krutoo/showcase/runtime';
-// standalone component for showing documentation with all stories
 import { ShowcaseApp } from '@krutoo/showcase/runtime-showcase';
-// "stories entrypoint" (trough alias, more on that later)
 import foundStories from '#found-stories';
-// showcase app styles bundle
 import '@krutoo/showcase/showcase.css';
 
+const { validStories } = filterValidStories(foundStories);
+
 // render documentation app wherever you want
 createRoot(document.getElementById('root')).render(
-  <ShowcaseApp
-    stories={filterValidStories(foundStories).validStories}
-    title='My UI Library'
-    logoSrc='public/my-logo.svg'
-  />,
+  <ShowcaseApp stories={validStories} title='My UI Library' logoSrc='public/my-logo.svg' />,
 );
 ```

docs/docs/showcase/customization.story.mdx

@@ -171,16 +171,22 @@ You can configure routing of your stories by **router** and **routing** options.
 #### Option `router`
 
 By this option you can configure how to deal with `window.location` if you want.
-Default router is `BrowserRouter` that connects to `window.location`.
-
-`BrowserRouter` can be exported and configured:
+Default router is `BrowserRouter` from `@krutoo/utils` that connects to `window.location`.
 
 ```jsx
-import { ShowcaseApp, BrowserRouter } from '@krutoo/showcase/showcase-runtime';
+import { ShowcaseApp } from '@krutoo/showcase/showcase-runtime';
+import { BrowserRouter } from '@krutoo/utils/router';
+
+const router = new BrowserRouter();
 
-<ShowcaseApp router={new BrowserRouter()}>
+<ShowcaseApp router={router} />;
 ```
 
+`BrowserRouter` can also be used in Node.js (or other server runtime) for SSG or SSR, see the [docs](https://krutoo.github.io/utils/?path=/router/browser-router).
+
+You also can implement your own router to work with url hash or for example
+even to not work with current location at all and store all in memory.
+
 #### Option `routing`
 
 This option controls how to:
@@ -189,14 +195,18 @@ This option controls how to:
 - define location by story
 - define story sandbox URL
 
-By default `ShowcaseApp` uses `QueryRouting` that looks for `?path` parameter in location.
+By default `ShowcaseApp` uses "query routing" that looks for `?path` parameter in location.
 
-If you want to make pathname-based routing you can use `PathnameRouting`:
+Query routing rules is provided by `QueryRouting` class.
+
+If you want to make pathname-based routing you can use `PathnameRouting` class:
 
 ```jsx
-import { ShowcaseApp, PathnameRouting } from '@krutoo/showcase/showcase-runtime';
+import { PathnameRouting, ShowcaseApp } from '@krutoo/showcase/showcase-runtime';
+
+const routing = new PathnameRouting();
 
-<ShowcaseApp routing={new PathnameRouting()}>
+<ShowcaseApp routing={routing} />;
 ```
 
 It also of course possible to provide your own implementation.
@@ -211,9 +221,11 @@ Notice that for pathname-based routing you also need to either:
 If you want to publish your showcase to non root path you can provide `publicPath` option to `PathnameRouting`:
 
 ```jsx
-import { ShowcaseApp, PathnameRouting } from '@krutoo/showcase/showcase-runtime';
+import { PathnameRouting, ShowcaseApp } from '@krutoo/showcase/showcase-runtime';
+
+const routing = new PathnameRouting({ publicPath: '/hello/' })
 
-<ShowcaseApp routing={new PathnameRouting({ publicPath: '/hello/' })}>
+<ShowcaseApp routing={routing} />;
 ```
 
 For example, `docs` repo published to GitHub Pages will have url `github.com/<username>/docs`

src/runtime-showcase/components/layout/layout.m.css

@@ -78,7 +78,8 @@
 }
 
 .presetFixedNav .main {
-  margin-top: var(--showcase-ui-header-height, 64px);
+  /* IMPORTANT: padding-top instead margin-top because of height without scroll */
+  padding-top: var(--showcase-ui-header-height, 64px);
 }
 
 .presetFixedNav .aside + .main {