add padding in container for StudioDisplayTiles in ConfigViewerPanel

Author: standeren

frontend/language/src/nb.json

@@ -744,7 +744,7 @@
   "process_editor.configuration_panel_set_unique_from_signatures_in_data_types": "Samme person kan ikke signere både denne oppgaven og:",
   "process_editor.configuration_panel_set_unique_from_signatures_in_data_types_link": "Bruk unik signatur på denne oppgaven",
   "process_editor.configuration_panel_signing_task": "Oppgave: Signering",
-  "process_editor.configuration_view_panel_id_label": "ID: {{id}}",
+  "process_editor.configuration_view_panel_id_label": "ID:",
   "process_editor.configuration_view_panel_name_label": "Navn: ",
   "process_editor.configuration_view_panel_no_task": "Du har ikke valgt noen oppgave",
   "process_editor.configuration_view_panel_please_choose_task": "Velg en oppgave for å se detaljer om valgt oppgave.",

frontend/libs/studio-components/src/components/StudioDisplayTile/StudioDisplayTile.test.tsx

@@ -22,16 +22,11 @@ describe('StudioDisplayTile', () => {
     expect(screen.getByText(value)).toBeInTheDocument();
   });
 
-  it('should show the padlock icon when by default', () => {
+  it('should show the padlock icon by default', () => {
     render(<StudioDisplayTile {...defaultProps} />);
     expect(screen.getByTestId(padlockIconTestId)).toBeInTheDocument();
   });
 
-  it('should show the padlock icon when showPadlock is true', () => {
-    render(<StudioDisplayTile {...defaultProps} showPadlock />);
-    expect(screen.getByTestId(padlockIconTestId)).toBeInTheDocument();
-  });
-
   it('should hide the padlock icon when showPadlock is false', () => {
     render(<StudioDisplayTile {...defaultProps} showPadlock={false} />);
     expect(screen.queryByTestId(padlockIconTestId)).not.toBeInTheDocument();

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.module.css

@@ -19,5 +19,5 @@
 }
 
 .displayTile {
-  padding-inline: var(--fds-spacing-5);
+  padding-inline: var(--fds-spacing-4);
 }

frontend/packages/process-editor/src/components/ConfigViewerPanel/ConfigViewerPanel.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: var(--fds-spacing-4);
+  gap: var(--fds-spacing-2);
+}

frontend/packages/process-editor/src/components/ConfigViewerPanel/ConfigViewerPanel.tsx

@@ -6,6 +6,7 @@ import { getConfigTitleHelpTextKey, getConfigTitleKey } from '../../utils/config
 import { useTranslation } from 'react-i18next';
 import { Alert, Heading, Paragraph } from '@digdir/designsystemet-react';
 import { ConfigSurface } from '../ConfigSurface/ConfigSurface';
+import classes from './ConfigViewerPanel.module.css';
 
 export const ConfigViewerPanel = (): React.ReactElement => {
   return (
@@ -52,7 +53,7 @@ export const ConfigViewerPanelContent = (): React.ReactElement => {
           title: t('process_editor.configuration_panel_header_help_text_title'),
         }}
       />
-      <div>
+      <div className={classes.container}>
         {propertiesToDisplay.map(({ label, value }) => (
           <StudioDisplayTile key={label} label={label} value={value} />
         ))}