almost responsiveness first draft is done

nima70 · Sep 17, 2024 · ae22b6e · ae22b6e
1 parent 0d7e97e
commit ae22b6e
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 48 deletions.
diff --git a/docs/storybook/2932.95f13ce3.iframe.bundle.js b/docs/storybook/2932.95f13ce3.iframe.bundle.js
diff --git a/docs/storybook/2932.e23e1375.iframe.bundle.js b/docs/storybook/2932.e23e1375.iframe.bundle.js
diff --git a/docs/storybook/iframe.html b/docs/storybook/iframe.html
@@ -492,7 +492,7 @@
     }
     body > .sb-preparing-story {
         visibility: hidden;
-    }</style><link href="static/css/main.4c45b0da.css" rel="stylesheet"><style>#storybook-root[hidden],
+    }</style><link href="static/css/main.a9f21101.css" rel="stylesheet"><style>#storybook-root[hidden],
       #storybook-docs[hidden] {
         display: none !important;
       }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><div class="sb-errordisplay_main"><h1 id="error-message"></h1><p>The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:</p><ol><li><strong>Missing Context/Providers</strong>: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the <a href="https://storybook.js.org/docs/react/writing-stories/decorators">Decorators documentation</a>.</li><li><strong>Misconfigured Webpack or Vite</strong>: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring <a href="https://storybook.js.org/docs/builders/webpack">Webpack</a> or <a href="https://storybook.js.org/docs/builders/vite">Vite</a> with Storybook.</li><li><strong>Missing Environment Variables</strong>: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the <a href="https://storybook.js.org/docs/configure/environment-variables">Environment Variables documentation</a>.</li></ol><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div></div><div id="storybook-root"></div><div id="storybook-docs"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
@@ -526,7 +526,7 @@
             window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
 
 
-      import './runtime~main.f6aa14a7.iframe.bundle.js';
+      import './runtime~main.891aab11.iframe.bundle.js';
 
       import './4776.6286459b.iframe.bundle.js';
 

diff --git a/docs/storybook/project.json b/docs/storybook/project.json
@@ -1 +1 @@
-{"generatedAt":1726582296086,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"CRA","packageName":"react-scripts","version":"5.0.1"},"testPackages":{},"packageManager":{"type":"yarn","version":"1.22.19"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"8.2.9","storybookVersionSpecifier":"^8.1.9","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.2.9"},"@storybook/react":{"version":"8.2.9"},"@storybook/react-webpack5":{"version":"8.2.9"},"@storybook/test":{"version":"8.2.9"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.2.9"}},"addons":{"@storybook/preset-create-react-app":{"version":"8.2.9"},"@storybook/addon-links":{"version":null},"@storybook/addon-essentials":{"version":"8.2.9"},"@storybook/addon-interactions":{"version":null}}}
+{"generatedAt":1726587336681,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"CRA","packageName":"react-scripts","version":"5.0.1"},"testPackages":{},"packageManager":{"type":"yarn","version":"1.22.19"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"8.2.9","storybookVersionSpecifier":"^8.1.9","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.2.9"},"@storybook/react":{"version":"8.2.9"},"@storybook/react-webpack5":{"version":"8.2.9"},"@storybook/test":{"version":"8.2.9"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.2.9"}},"addons":{"@storybook/preset-create-react-app":{"version":"8.2.9"},"@storybook/addon-links":{"version":null},"@storybook/addon-essentials":{"version":"8.2.9"},"@storybook/addon-interactions":{"version":null}}}
diff --git a/...ok/runtime~main.f6aa14a7.iframe.bundle.js → ...ok/runtime~main.891aab11.iframe.bundle.js b/...ok/runtime~main.f6aa14a7.iframe.bundle.js → ...ok/runtime~main.891aab11.iframe.bundle.js
diff --git a/docs/storybook/static/css/main.4c45b0da.css → docs/storybook/static/css/main.a9f21101.css b/docs/storybook/static/css/main.4c45b0da.css → docs/storybook/static/css/main.a9f21101.css
diff --git a/...torybook/static/css/main.4c45b0da.css.map → ...torybook/static/css/main.a9f21101.css.map b/...torybook/static/css/main.4c45b0da.css.map → ...torybook/static/css/main.a9f21101.css.map
diff --git a/src/login/pages/WebauthnError.tsx b/src/login/pages/WebauthnError.tsx
@@ -25,42 +25,44 @@ export default function WebauthnError(props: PageProps<Extract<KcContext, { page
             displayMessage
             headerNode={msg("webauthn-error-title")}
         >
-            <form id="kc-error-credential-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
-                <input type="hidden" id="executionValue" name="authenticationExecution" />
-                <input type="hidden" id="isSetRetry" name="isSetRetry" />
-            </form>
-            <input
-                tabIndex={4}
-                onClick={() => {
-                    // @ts-expect-error: Trusted Keycloak's code
-                    document.getElementById("isSetRetry").value = "retry";
-                    // @ts-expect-error: Trusted Keycloak's code
-                    document.getElementById("executionValue").value = "${execution}";
-                    // @ts-expect-error: Trusted Keycloak's code
-                    document.getElementById("kc-error-credential-form").submit();
-                }}
-                type="button"
-                // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
-                className={cn(buttonVariants(), "w-full")}
-                name="try-again"
-                id="kc-try-again"
-                value={msgStr("doTryAgain")}
-            />
-            {isAppInitiatedAction && (
-                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-webauthn-settings-form" method="post">
-                    <Button
-                        type="submit"
-                        className="w-full"
-                        // className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
-                        variant="outline"
-                        id="cancelWebAuthnAIA"
-                        name="cancel-aia"
-                        value="true"
-                    >
-                        {msgStr("doCancel")}
-                    </Button>
+            <div className="responsive-container">
+                <form id="kc-error-credential-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                    <input type="hidden" id="executionValue" name="authenticationExecution" />
+                    <input type="hidden" id="isSetRetry" name="isSetRetry" />
                 </form>
-            )}
+                <input
+                    tabIndex={4}
+                    onClick={() => {
+                        // @ts-expect-error: Trusted Keycloak's code
+                        document.getElementById("isSetRetry").value = "retry";
+                        // @ts-expect-error: Trusted Keycloak's code
+                        document.getElementById("executionValue").value = "${execution}";
+                        // @ts-expect-error: Trusted Keycloak's code
+                        document.getElementById("kc-error-credential-form").submit();
+                    }}
+                    type="button"
+                    // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                    className={cn(buttonVariants(), "w-full")}
+                    name="try-again"
+                    id="kc-try-again"
+                    value={msgStr("doTryAgain")}
+                />
+                {isAppInitiatedAction && (
+                    <form action={url.loginAction} className="w-full" id="kc-webauthn-settings-form" method="post">
+                        <Button
+                            type="submit"
+                            className="w-full"
+                            // className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                            variant="outline"
+                            id="cancelWebAuthnAIA"
+                            name="cancel-aia"
+                            value="true"
+                        >
+                            {msgStr("doCancel")}
+                        </Button>
+                    </form>
+                )}
+            </div>
         </Template>
     );
 }
diff --git a/src/login/pages/WebauthnRegister.tsx b/src/login/pages/WebauthnRegister.tsx
@@ -230,7 +230,7 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
                     <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
                 </div>
             </form>
-            <div className="flex space-x-2 items-center justify-between">
+            <div className="responsive-container ">
                 <input
                     type="submit"
                     // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}