diff --git a/apps/forms/app/[lang]/data-hunter/components/data-hunter-form/data-hunter-form.module.css b/apps/forms/app/[lang]/data-hunter/components/data-hunter-form/data-hunter-form.module.css index d07c892c..105c3557 100644 --- a/apps/forms/app/[lang]/data-hunter/components/data-hunter-form/data-hunter-form.module.css +++ b/apps/forms/app/[lang]/data-hunter/components/data-hunter-form/data-hunter-form.module.css @@ -1,7 +1,7 @@ .form { - display:flex; - flex-direction:column; - gap:2rem; + display: flex; + flex-direction: column; + gap: 2rem; } .textField { @@ -33,3 +33,9 @@ .submitButton { align-self: flex-start; } + +@media (max-width: 576px) { + .textFieldHalfWidth { + width: 100%; + } +} diff --git a/apps/forms/app/[lang]/data-hunter/components/data-hunter-form/index.tsx b/apps/forms/app/[lang]/data-hunter/components/data-hunter-form/index.tsx index 7385495f..a7936292 100644 --- a/apps/forms/app/[lang]/data-hunter/components/data-hunter-form/index.tsx +++ b/apps/forms/app/[lang]/data-hunter/components/data-hunter-form/index.tsx @@ -20,10 +20,6 @@ const DataHunterForm = ({ dictionary }: DataHunterFormProps) => { return ( <> -
{ {dictionary.submitRequest}
+ ); }; diff --git a/apps/forms/app/[lang]/data-hunter/page.module.css b/apps/forms/app/[lang]/data-hunter/page.module.css index 31be4bde..f697c1bb 100644 --- a/apps/forms/app/[lang]/data-hunter/page.module.css +++ b/apps/forms/app/[lang]/data-hunter/page.module.css @@ -1,23 +1,13 @@ .contentContainer { display: flex; flex-direction: column; - align-items: center; - justify-content: center; - max-width: 843px; + max-width: var(--breakpoint-x-large); margin: 5rem auto; + padding: 1rem; + box-sizing: border-box; + min-width: var(--breakpoint-x-small); } -.contentContainer .paragraph { +.contentContainer { margin-bottom: 3rem; } - -.paragraph { - text-align: center; -} - -@media screen and (max-width: 1200px) { - .contentContainer { - composes: contentContainer; - margin: 5rem 1rem; - } -} diff --git a/apps/forms/app/[lang]/data-hunter/page.tsx b/apps/forms/app/[lang]/data-hunter/page.tsx index 09ede04f..91576b6c 100644 --- a/apps/forms/app/[lang]/data-hunter/page.tsx +++ b/apps/forms/app/[lang]/data-hunter/page.tsx @@ -21,9 +21,7 @@ const DataHunterPage = async ({ params: { lang } }: Props) => { const dictionary = await getDictionary(lang); - const { - FDK_BASE_URI - } = process.env; + const { FDK_BASE_URI } = process.env; const baseUri = FDK_BASE_URI ?? '/'; @@ -54,7 +52,7 @@ const DataHunterPage = async ({ params: { lang } }: Props) => { {dictionary.dataHunterForm.description} diff --git a/apps/frontpage-e2e/playwright.config.ts b/apps/frontpage-e2e/playwright.config.ts index 82438ff0..9789c238 100644 --- a/apps/frontpage-e2e/playwright.config.ts +++ b/apps/frontpage-e2e/playwright.config.ts @@ -25,7 +25,7 @@ export default defineConfig({ }, /* Run your local dev server before starting the tests */ webServer: { - command: 'yarn nx start frontpage', + command: 'yarn nx dev frontpage', url: 'http://127.0.0.1:3000', reuseExistingServer: !process.env.CI, cwd: workspaceRoot, diff --git a/libs/ui/src/lib/alert-submit-status/submit-status-alert.module.css b/libs/ui/src/lib/alert-submit-status/submit-status-alert.module.css index 4e06aa8d..6efaeaba 100644 --- a/libs/ui/src/lib/alert-submit-status/submit-status-alert.module.css +++ b/libs/ui/src/lib/alert-submit-status/submit-status-alert.module.css @@ -1,3 +1,4 @@ .alert { + margin-top: 2rem; width: 97%; } diff --git a/libs/ui/src/lib/container/container.module.css b/libs/ui/src/lib/container/container.module.css index ff7a086a..cd8272c6 100644 --- a/libs/ui/src/lib/container/container.module.css +++ b/libs/ui/src/lib/container/container.module.css @@ -3,6 +3,5 @@ display: grid; grid-template-columns: 1fr 10fr 1fr; grid-template-areas: ". content ."; - min-width: var(--breakpoint-large); max-width: var(--breakpoint-xxx-large); } diff --git a/libs/ui/src/lib/header/components/desktop/components/menu-language/menu-desktop-language.module.css b/libs/ui/src/lib/header/components/desktop/components/menu-language/menu-desktop-language.module.css index 91e6bde8..e6c18f90 100644 --- a/libs/ui/src/lib/header/components/desktop/components/menu-language/menu-desktop-language.module.css +++ b/libs/ui/src/lib/header/components/desktop/components/menu-language/menu-desktop-language.module.css @@ -3,7 +3,7 @@ background-color: #1e2b3c; } -@media (max-width: 1400px) { +@media (max-width: 1440px) { .desktopLanguageMenu { display: none; } diff --git a/libs/ui/src/lib/header/components/desktop/desktop.module.css b/libs/ui/src/lib/header/components/desktop/desktop.module.css index 5b253d24..6b63ffe3 100644 --- a/libs/ui/src/lib/header/components/desktop/desktop.module.css +++ b/libs/ui/src/lib/header/components/desktop/desktop.module.css @@ -56,7 +56,7 @@ background-color: #1e2b3c; } -@media (max-width: 1400px) { +@media (max-width: 1440px) { .desktopHeader { display: none; } diff --git a/libs/ui/src/lib/header/components/mobile/components/menu-language/mobile.module.css b/libs/ui/src/lib/header/components/mobile/components/menu-language/mobile.module.css index 5df97cbc..40112e1a 100644 --- a/libs/ui/src/lib/header/components/mobile/components/menu-language/mobile.module.css +++ b/libs/ui/src/lib/header/components/mobile/components/menu-language/mobile.module.css @@ -6,7 +6,7 @@ display: none; } -@media (max-width: 1400px) { +@media (max-width: 1440px) { .mobileLanguageMenu { display: block; } diff --git a/libs/ui/src/lib/header/components/mobile/mobile.module.css b/libs/ui/src/lib/header/components/mobile/mobile.module.css index 521ba264..3958d58e 100644 --- a/libs/ui/src/lib/header/components/mobile/mobile.module.css +++ b/libs/ui/src/lib/header/components/mobile/mobile.module.css @@ -18,7 +18,7 @@ text-decoration: none; } -@media (max-width: 1400px) { +@media (max-width: 1440px) { .nav { display: block; } diff --git a/libs/ui/src/lib/layout-root/global.css b/libs/ui/src/lib/layout-root/global.css index 7659a8cf..cec66fe9 100644 --- a/libs/ui/src/lib/layout-root/global.css +++ b/libs/ui/src/lib/layout-root/global.css @@ -1,20 +1,24 @@ /* Define layers in specific order */ @layer reset, fds; -@import url("./reset.css"); -@import url("@digdir/designsystemet-theme"); -@import url("@digdir/designsystemet-css"); +@import url('./reset.css'); +@import url('@digdir/designsystemet-theme'); +@import url('@digdir/designsystemet-css'); /* Small devices such as large phones (640px and up) */ -/* breakpoints based on bootstrap's breakpoints */ +/* + breakpoints based on designsystem.no breakpoints. + https://github.com/digdir/designsystemet/tree/main/design-tokens/Viewport +*/ :root { - --breakpoint-small: 640px; - --breakpoint-medium: 768px; - --breakpoint-large: 992px; - --breakpoint-x-large: 1200px; - --breakpoint-xx-large: 1400px; - --breakpoint-xxx-large: 1600px; + --breakpoint-x-small: 320px; + --breakpoint-small: 375px; + --breakpoint-medium: 576px; + --breakpoint-large: 768px; + --breakpoint-x-large: 992px; + --breakpoint-xx-large: 1200px; + --breakpoint-xxx-large: 1440px; --color-fdk-navy: #1e2b3c; }