FO-2882 Bedre responsivitet på tabellen

Author: AlexGaard

src/components/user-table/body/user-table-body.less

@@ -1,4 +1,5 @@
 @import "~nav-frontend-core/less/_variabler";
+@import "../user-table";
 
 .user-table-body {
   padding: 0;
@@ -19,7 +20,7 @@
 
   &__innhold {
     display: grid;
-    grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr;
+    .column-template();
     justify-items: start;
     padding: 1.5rem 2rem;
     cursor: pointer;

src/components/user-table/body/user-table-row.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import cls from 'classnames';
 import { Bruker, UtkastStatus } from '../../../rest/data/bruker';
 import { formatDateStr, formatDateTime } from '../../../utils/date-utils';
@@ -28,15 +28,17 @@ export const UserRow = (props: { bruker: Bruker, aktivEnhet: OrNothing<string> }
 		return undefined;
 	}
 
+	const alignStart: CSSProperties = { textAlign: 'start' };
+
 	return (
 		<li className="user-table-row">
 			<a className={cls('user-table-row__innhold', {'user-table-row__innhold--maskert': erMaskert})} href={lagBrukerUrl()}>
-				<Normaltekst style={{ textAlign: 'start' }}>{lagBrukerNavn(brukerFornavn, brukerEtternavn)}</Normaltekst>
+				<Normaltekst style={alignStart}>{lagBrukerNavn(brukerFornavn, brukerEtternavn)}</Normaltekst>
 				<Element>{brukerFnr}</Element>
 				<Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
 				<UtkastStatusData status={status}/>
-				<Element>{beslutterNavn || '-'}</Element>
-				<Normaltekst>{veilederNavn}</Normaltekst>
+				<Element style={alignStart}>{beslutterNavn || '-'}</Element>
+				<Normaltekst style={alignStart}>{veilederNavn}</Normaltekst>
 				<Normaltekst>{formatDateTime(statusEndret)}</Normaltekst>
 				<Normaltekst>{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
 			</a>

src/components/user-table/header/user-table-header.less

@@ -1,8 +1,9 @@
 @import "~nav-frontend-core/less/_variabler";
+@import "../user-table";
 
 .user-table-header {
   display: grid;
-  grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr;
+  .column-template();
   justify-items: start;
   padding: 0 2rem 1rem 2rem;
   border-bottom: 2px solid @navGra60;

src/components/user-table/user-table.less

@@ -7,4 +7,9 @@
     margin: 2rem auto 0 auto;
     width: 400px;
   }
+}
+
+.column-template() {
+  grid-template-columns: minmax(150px, 2fr) minmax(120px, 150px) minmax(100px, 150px) minmax(125px, 250px) minmax(100px, 2fr) minmax(100px, 2fr) minmax(100px, 200px) minmax(75px, 150px);
+  grid-column-gap: 4px;
 }