HL-819 | Style fixes to application form

frontend/benefit/applicant/public/locales/en/common.json

@@ -186,7 +186,7 @@
         "salaryExpensesExplanation": "The gross salary and indirect labour costs are indicated in EUR per month, holiday bonus as a lump sum",
         "tooltips": {
           "heading5Employment": "Collective agreement applied: e.g. Collective Agreement for the Commercial Sector. If there is no binding collective agreement in the sector, put in a dash.",
-          "heading5EmploymentSub1": "The gross salary is the salary paid to the subsidised employee before the deduction of the employee’s statutory contributions (the employee’s unemployment insurance and pension insurance contributions) and taxes. If the subsidised employee is paid remuneration bonuses (e.g. evening, night or shift work bonus), take the estimated amount into account in the gross salary. The employers’ statutory indirect labour costs include social security expenses, pension insurance, accident insurance and unemployment insurance premiums as well as the mandatory group life insurance premium. Indirect labour costs refer to the amount of the employer’s statutory indirect labour costs paid for the salary per month. The holiday bonus is a salary cost to be covered by the subsidy when it is paid for holiday pay during the subsidy period. Estimate the amount of holiday bonus to be paid during the subsidy period. Holiday compensation is not covered by the Helsinki benefit.",
+          "heading5EmploymentSub1": "The gross salary is the salary paid to the subsidised employee before the deduction of the employee’s statutory contributions (the employee’s unemployment insurance and pension insurance contributions) and taxes. If the subsidised employee is paid remuneration bonuses (e.g. evening, night or shift work bonus), take the estimated amount into account in the gross salary. The employers’ statutory indirect labour costs include social security expenses, pension insurance, accident insurance and unemployment insurance premiums as well as the mandatory group life insurance premium.\r\n\r\nIndirect labour costs refer to the amount of the employer’s statutory indirect labour costs paid for the salary per month.\r\n\r\nThe holiday bonus is a salary cost to be covered by the subsidy when it is paid for holiday pay during the subsidy period. Estimate the amount of holiday bonus to be paid during the subsidy period. Holiday compensation is not covered by the Helsinki benefit.",
           "heading5Assignment": "The gross salary is the salary paid to the subsidised employee before the deduction of the employee's statutory contributions (the employee's unemployment insurance and pension insurance contributions) and taxes. If the subsidised employee is paid remuneration bonuses (e.g. evening, night or shift work bonus), take the estimated amount into account in the gross salary. The employers' statutory indirect labour costs include social security expenses, pension insurance, accident insurance and unemployment insurance premiums as well as the mandatory group life insurance premium. Indirect labour costs refer to the amount of the employer's statutory indirect labour costs paid for the salary per month. The holiday bonus is a salary cost to be covered by the subsidy when it is paid for holiday pay during the subsidy period. Estimate the amount of holiday bonus to be paid during the subsidy period. Holiday compensation is not covered by the Helsinki benefit.",
           "heading2": "Pay subsidy is a financial subsidy intended to promote the employment of an unemployed jobseeker, which TE Services can grant to the employer for salary costs.",
           "heading3": "The Helsinki benefit for employment is intended for guidance, orientation, tools, work clothing and workspace costs when no other support is paid for these. The Helsinki benefit for salary is intended for the cost of employing a subsidised employee (= gross salary, statutory indirect labour costs and holiday bonus). The Helsinki benefit for a commission is intended for the performance of an individual job or project."

frontend/benefit/applicant/public/locales/fi/common.json

@@ -186,7 +186,7 @@
         "salaryExpensesExplanation": "Bruttopalkka ja sivukulut ilmoitetaan euroina kuukaudessa, lomaraha kertasummana",
         "tooltips": {
           "heading5Employment": "Sovellettava työehtosopimus: esim. Kaupan työehtosopimus. Jos alalla ei ole velvoittavaa työehtosopimusta, merkitse viiva.",
-          "heading5EmploymentSub1": "Bruttopalkalla tarkoitetaan tuella palkattavalle maksettavaa palkkaa ennen työntekijän lakisääteisten maksujen (työntekijän työttömyysvakuutus- ja eläkevakuutusmaksu) ja verojen pidätystä. Jos tuella palkattavalle maksetaan palkan lisiä (esim. ilta-, yö- tai vuorotyölisä), ota niiden arvioitu määrä huomioon bruttopalkassa. Työnantajan lakisääteisiin sivukuluihin luetaan sosiaaliturva-, työeläkevakuutus-, tapaturmavakuutus- ja työttömyysvakuutusmaksu sekä pakollinen ryhmähenkivakuutusmaksu. Sivukulut tarkoittavat palkasta maksettavien työnantajan lakisääteisten sivukulujen määrä kuukaudessa. Lomaraha on tuella katettava palkkauskustannus silloin, kun se maksetaan tukijakson aikana pidetystä vuosilomapalkasta. Arvioi tukijakson aikana maksettavan lomarahan määrä. Lomakorvaus ei ole Helsinki-lisällä katettava korvaus.",
+          "heading5EmploymentSub1": "Bruttopalkalla tarkoitetaan tuella palkattavalle maksettavaa palkkaa ennen työntekijän lakisääteisten maksujen (työntekijän työttömyysvakuutus- ja eläkevakuutusmaksu) ja verojen pidätystä. Jos tuella palkattavalle maksetaan palkan lisiä (esim. ilta-, yö- tai vuorotyölisä), ota niiden arvioitu määrä huomioon bruttopalkassa. Työnantajan lakisääteisiin sivukuluihin luetaan sosiaaliturva-, työeläkevakuutus-, tapaturmavakuutus- ja työttömyysvakuutusmaksu sekä pakollinen ryhmähenkivakuutusmaksu.\r\n\r\nSivukulut tarkoittavat palkasta maksettavien työnantajan lakisääteisten sivukulujen määrä kuukaudessa.\r\n\r\nLomaraha on tuella katettava palkkauskustannus silloin, kun se maksetaan tukijakson aikana pidetystä vuosilomapalkasta. Arvioi tukijakson aikana maksettavan lomarahan määrä. Lomakorvaus ei ole Helsinki-lisällä katettava korvaus.",
           "heading5Assignment": "Palkkauskustannukset tooltip text",
           "heading2": "Palkkatuki on työttömän työnhakijan työllistymisen edistämiseksi tarkoitettu rahallinen tuki, jonka TE-palvelut voi myöntää työnantajalle palkkauskustannuksiin.",
           "heading3": "Työllistämisen Helsinki-lisä on tarkoitettu ohjaus-, perehdytys-, työväline-, työvaate- ja työtilakustannuksiin silloin, kun niihin ei makseta muuta tukea. Palkan Helsinki-lisä on tarkoitettu työllistetyn henkilön palkkauskustannuksiin (=bruttopalkka, lakisääteiset sivukulut ja lomaraha). Toimeksiannon Helsinki-lisä on tarkoitettu yksittäisen työn tai projektin suorittamiseen."

frontend/benefit/applicant/public/locales/sv/common.json

@@ -186,7 +186,7 @@
         "salaryExpensesExplanation": "Bruttolön och bikostnader anges i euro per månad, semesterpenning som ett engångsbelopp",
         "tooltips": {
           "heading5Employment": "Kollektivavtal som tillämpas: t.ex. kollektivavtal för handeln. Sätt streck om branschen inte har ett bindande kollektivavtal.",
-          "heading5EmploymentSub1": "Med bruttolön avses lönen till den person som anställs med subventionen före innehållande av arbetsgivarens lagstadgade kostnader (arbetslöshets- och pensionsförsäkringspremier för arbetstagaren) och skatter. Om den person som anställs med subventionen får lönetillägg (t.ex. kvälls-, natt- eller skiftarbetstillägg), ska det uppskattade beloppet från dessa beaktas i bruttolönen. Till arbetsgivarens lagstadgade bikostnader räknas socialskyddsavgifterna och premierna för arbetspensionsförsäkringen, olycksfallsförsäkringen och arbetslöshetsförsäkringen samt den obligatoriska grupplivförsäkringen. Med bikostnader avses arbetsgivarens lagstadgade bikostnader per månad. Semesterpenning är en lönekostnad som kan täckas med subventionen till den del som semesterpenning betalas för semesterlön som används under subventionsperioden. Uppskatta semesterpenningen som betalas under subventionsperioden. Semesterpenning kan inte täckas med Helsingforstillägg.",
+          "heading5EmploymentSub1": "Med bruttolön avses lönen till den person som anställs med subventionen före innehållande av arbetsgivarens lagstadgade kostnader (arbetslöshets- och pensionsförsäkringspremier för arbetstagaren) och skatter. Om den person som anställs med subventionen får lönetillägg (t.ex. kvälls-, natt- eller skiftarbetstillägg), ska det uppskattade beloppet från dessa beaktas i bruttolönen. Till arbetsgivarens lagstadgade bikostnader räknas socialskyddsavgifterna och premierna för arbetspensionsförsäkringen, olycksfallsförsäkringen och arbetslöshetsförsäkringen samt den obligatoriska grupplivförsäkringen.\r\n\r\nMed bikostnader avses arbetsgivarens lagstadgade bikostnader per månad.\r\n\r\nSemesterpenning är en lönekostnad som kan täckas med subventionen till den del som semesterpenning betalas för semesterlön som används under subventionsperioden. Uppskatta semesterpenningen som betalas under subventionsperioden. Semesterpenning kan inte täckas med Helsingforstillägg.",
           "heading5Assignment": "Med bruttolön avses lönen till den person som anställs med subventionen före innehållande av arbetsgivarens lagstadgade kostnader (arbetslöshets- och pensionsförsäkringspremier för arbetstagaren) och skatter. Om den person som anställs med subventionen får lönetillägg (t.ex. kvälls-, natt- eller skiftarbetstillägg), ska det uppskattade beloppet från dessa beaktas i bruttolönen. Till arbetsgivarens lagstadgade bikostnader räknas socialskyddsavgifterna och premierna för arbetspensionsförsäkringen, olycksfallsförsäkringen och arbetslöshetsförsäkringen samt den obligatoriska grupplivförsäkringen. Med bikostnader avses arbetsgivarens lagstadgade bikostnader per månad. Semesterpenning är en lönekostnad som kan täckas med subventionen till den del som semesterpenning betalas för semesterlön som används under subventionsperioden. Uppskatta semesterpenningen som betalas under subventionsperioden. Semesterpenning kan inte täckas med Helsingforstillägg.",
           "heading2": "Lönesubvention är ett ekonomiskt stöd för främjande av sysselsättningen av en arbetslös arbetssökande som arbets- och näringslivstjänsterna kan bevilja till arbetsgivaren för lönekostnader.",
           "heading3": "Helsingforstillägg för sysselsättning är avsett för kostnaderna för handledning, inskolning, arbetsredskap, arbetskläder och arbetslokaler då inga andra understöd utbetalas för dessa. Helsingforstillägg för lön är avsett för lönekostnaderna för den anställda (=bruttolön, lagstadgade bikostnader och semesterpenning). Helsingforstillägg för uppdrag är avsett för utförande av ett enskilt jobb eller projekt."

frontend/benefit/applicant/src/components/applications/Applications.sc.ts

@@ -1,14 +1,21 @@
+import { respondAbove } from 'shared/styles/mediaQueries';
 import styled from 'styled-components';
 
 export const $PageHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
+  display: block;
   margin-bottom: ${(props) => props.theme.spacing.s};
   margin-top: ${(props) => props.theme.spacing.m};
-  & > div {
-    flex: 1 0 50%;
+
+  & > * {
+    margin-bottom: ${(props) => props.theme.spacing.m};
   }
+
+  ${respondAbove('md')`
+    flex: 1 0 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+  `};
 `;
 
 export const $HeaderItem = styled.div``;

frontend/benefit/applicant/src/components/applications/forms/application/step4/ApplicationFormStep4.tsx

@@ -75,7 +75,7 @@ const ApplicationFormStep4: React.FC<DynamicFormStepComponentProps> = ({
             />
           </$GridCell>
         )}
-        <$GridCell $colSpan={6}>
+        <$GridCell $colSpan={12}>
           <CredentialsSection
             title={t(`${translationsBase}.uploadPowerOfAttorney.title`)}
             description={t(
@@ -123,7 +123,7 @@ const ApplicationFormStep4: React.FC<DynamicFormStepComponentProps> = ({
                         {t(`${translationsBase}.uploadPowerOfAttorney.action1`)}
                       </Button>
                     </$GridCell>
-                    <$GridCell $colSpan={6}>
+                    <$GridCell $colSpan={8}>
                       <UploadAttachment
                         theme="black"
                         variant="secondary"

frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx

@@ -133,7 +133,14 @@ const PageContent: React.FC = () => {
   }
 
   return (
-    <Container data-testid={`step-${currentStep}`}>
+    <Container
+      data-testid={`step-${currentStep}`}
+      css={{
+        'max-width': theme.contentWidth.max,
+        margin: '0 auto',
+        'grid-template-columns': 'repeat(auto-fit, minmax(180px, 1fr))',
+      }}
+    >
       <$PageHeader>
         <$HeaderItem>
           <$PageHeading>

frontend/benefit/applicant/src/styles/globals.css

@@ -17,3 +17,8 @@ li {
 .app-load-wrapper > div {
   display: none;
 }
+
+/* Allow HDS tooltip's content to break new line on every \r\n */
+[class*='Tooltip-module'] section[class*='Tooltip-module_tooltip'] {
+  white-space: pre-line;
+}

frontend/shared/src/components/container/Container.sc.ts

@@ -1,17 +1,19 @@
 import { respondAbove } from 'shared/styles/mediaQueries';
+import theme from 'shared/styles/theme';
 import styled from 'styled-components';
 
 export type ContainerProps = { backgroundColor?: string };
 
+const gridTemplateColumns = `grid-template-columns: 1fr minmax(auto, 
+  ${theme.contentWidth.max}) 1fr;`;
+
 export const $Container = styled.div<ContainerProps>`
   display: grid;
   background-color: ${(props) => props.backgroundColor || ''};
   grid-template-columns: ${(props) => props.theme.spacing.xs2} 1fr ${(props) =>
       props.theme.spacing.xs2};
 
-  ${respondAbove('md')`
-    grid-template-columns: 1fr minmax(auto, 1240px) 1fr;
-  `};
+  ${respondAbove('md')(gridTemplateColumns)}
 
   & > * {
     grid-column: 2;

frontend/shared/src/styles/theme.ts

@@ -155,6 +155,9 @@ const theme: DefaultTheme = {
     l: '992px',
     xl: '1248px',
   },
+  contentWidth: {
+    max: '1240px',
+  },
   components: {
     tabs: {
       '--tab-color': tokens.coatOfArms,

frontend/shared/src/types/styled-components.d.ts

@@ -138,6 +138,9 @@ declare module 'styled-components' {
       l: '992px';
       xl: '1248px';
     };
+    contentWidth: {
+      max: '1240px';
+    };
     components: {
       stepper: {
         '--hds-not-selected-step-label-color': string;