fix: alert position and responsiveness

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%;
+  }
+}

apps/forms/app/[lang]/data-hunter/components/data-hunter-form/index.tsx

@@ -20,10 +20,6 @@ const DataHunterForm = ({ dictionary }: DataHunterFormProps) => {
 
   return (
     <>
-      <SubmitStatusAlert
-        dictionary={dictionary}
-        formStatus={state?.status}
-      />
       <form
         id='data-hunter-form'
         name='data-hunter-form'
@@ -112,6 +108,10 @@ const DataHunterForm = ({ dictionary }: DataHunterFormProps) => {
           {dictionary.submitRequest}
         </Button>
       </form>
+      <SubmitStatusAlert
+        dictionary={dictionary}
+        formStatus={state?.status}
+      />
     </>
   );
 };

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;
-  }
-}

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) => {
         </Heading>
         <Paragraph
           size='large'
-          className={styles.paragraph}
+          spacing
         >
           {dictionary.dataHunterForm.description}
         </Paragraph>

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,

libs/ui/src/lib/alert-submit-status/submit-status-alert.module.css

@@ -1,3 +1,4 @@
 .alert {
+  margin-top: 2rem;
   width: 97%;
 }

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);
 }

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;
   }

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;
   }

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;
   }

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;
   }

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;
 }