From 3b6eb9794df02279b12dc367de4dc5e4dee91385 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Thu, 16 Nov 2023 14:43:14 +0100
Subject: [PATCH] tweak design for security level selection (#11600)

---
 frontend/language/src/nb.json                                | 2 +-
 frontend/packages/policy-editor/src/PolicyEditor.module.css  | 1 +
 .../SecurityLevelSelect/SecurityLevelSelect.module.css       | 5 +++++
 .../components/SecurityLevelSelect/SecurityLevelSelect.tsx   | 4 ++--
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index 008826c4879..8ee17300a2d 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -620,7 +620,7 @@
   "policy_editor.rules": "Regler for tilgang til applikasjonen",
   "policy_editor.security_level_description": "Sikkerhetsnivået du setter her blir minstekrav for innloggingsmetoden til bruker. Sikkerhetsnivå 1 og 2 er kun tilgjengelig via API. Skal bruker logge seg inn via ID-porten blir minstekrav sikkerhetsnivå 3.",
   "policy_editor.security_level_label": "Sikkerhetsnivå",
-  "policy_editor.select_auth_level_help_text_content": "Ler mer om sikkerhetsnivå og innlogging for sluttbruker.",
+  "policy_editor.select_auth_level_help_text_content": "Les mer om sikkerhetsnivå og innlogging for sluttbruker.",
   "policy_editor.select_auth_level_label": "Velg minimum påkrevd sikkerhetsnivå for bruker",
   "policy_editor.verification_modal_action_button": "Ja, slett regel",
   "policy_editor.verification_modal_close_button": "Nei, gå tilbake",
diff --git a/frontend/packages/policy-editor/src/PolicyEditor.module.css b/frontend/packages/policy-editor/src/PolicyEditor.module.css
index a5278283fb5..6c985c13e2a 100644
--- a/frontend/packages/policy-editor/src/PolicyEditor.module.css
+++ b/frontend/packages/policy-editor/src/PolicyEditor.module.css
@@ -1,5 +1,6 @@
 .alertWrapper {
   margin-bottom: 20px;
+  max-width: 650px;
 }
 
 .alert {
diff --git a/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.module.css b/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.module.css
index c364d4217a2..b2706ffb740 100644
--- a/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.module.css
+++ b/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.module.css
@@ -15,4 +15,9 @@
 
 .link {
   display: inline;
+  font: var(--fds-typography-paragraph-small);
+}
+
+.securityLevelContainer {
+  max-width: 650px;
 }
diff --git a/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.tsx b/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.tsx
index 524ff8224db..d1d2bd0b193 100644
--- a/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.tsx
+++ b/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.tsx
@@ -44,7 +44,7 @@ export const SecurityLevelSelect = ({
   }, [t]);
 
   return (
-    <div>
+    <div className={classes.securityLevelContainer}>
       <Heading level={2} size='xxsmall' spacing>
         {t('policy_editor.security_level_label')}
       </Heading>
@@ -57,7 +57,7 @@ export const SecurityLevelSelect = ({
           <Label size='small' htmlFor={SELECT_AUTH_LEVEL_ID}>
             {t('policy_editor.select_auth_level_label')}
           </Label>
-          <HelpText title={t('policy_editor.select_auth_level_help_text')}>
+          <HelpText size='small' title={t('policy_editor.select_auth_level_help_text')}>
             <Link
               href={URL_TO_SECURITY_LEVEL_PAGE}
               target='_newTab'