bug fixes (#453)

* linkfy informasjonselement * fix mobileview, use full height * fix margin * fix margin chat
navikt · May 16, 2023 · 526ffc0 · 526ffc0
1 parent 766966f
commit 526ffc0
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -69,8 +69,8 @@ const App = (props: Props) => {
     return (
         <div
             className={cx('flex flex-col', {
-                'min-h-[calc(100vh-180px)] md:h-[calc(100vh-180px)]': erInternFlate,
-                'min-h-[calc(100vh-72px)] md:h-[calc(100vh-80px)]': !erInternFlate
+                'min-h-[calc(100vh-180px)] h-[calc(100vh-180px)]': erInternFlate,
+                'min-h-[calc(100vh-72px)] h-[calc(100vh-80px)]': !erInternFlate
             })}
         >
             <Provider fnr={fnr} erVeileder={!!fnr}>

diff --git a/src/view/aktivitet/DialogMedAktivitetHeader.tsx b/src/view/aktivitet/DialogMedAktivitetHeader.tsx
@@ -31,7 +31,7 @@ export function DialogMedAktivitetHeader(props: Props) {
             <div className="flex w-full flex-col md:flex-row">
                 <div className="flex flex-1 flex-row items-center gap-x-2 lg:max-w-lgContainer xl:max-w-none">
                     <TilbakeKnapp className="md:hidden" />
-                    <div className="ml-4">
+                    <div className="md:ml-4">
                         <Heading level="2" size="small" aria-label={`${typeTekst}: ${aktivitet?.tittel}`}>
                             {aktivitet?.tittel}
                         </Heading>

diff --git a/src/view/aktivitet/InformasjonElement.tsx b/src/view/aktivitet/InformasjonElement.tsx
@@ -4,6 +4,7 @@ import React, { ReactNode } from 'react';
 
 import EksternLenke from '../../felleskomponenter/EksternLenke';
 import { StringOrNull } from '../../utils/Typer';
+import { linkify } from '../melding/linkify';
 
 interface TekstomradeProps {
     merkelapptekst: string;
@@ -18,7 +19,7 @@ export default function InformasjonElement(props: TekstomradeProps) {
 
     return (
         <InformasjonElementRaw merkelapptekst={merkelapptekst}>
-            <span className="text-ellipsis overflow-hidden">{verdi}</span>
+            <span className="text-ellipsis overflow-hidden">{linkify(verdi)}</span>
         </InformasjonElementRaw>
     );
 }

diff --git a/src/view/dialogliste/DialogOversikt.tsx b/src/view/dialogliste/DialogOversikt.tsx
@@ -46,7 +46,7 @@ const DialogOversikt = () => {
         <div
             className={classNames(
                 { hidden: !!dialog || isNyRoute } /* Hvis liten skjerm, bare vis dialog-liste på "Homepage"  */,
-                'border-r border-border-divider w-full h-full md:max-w-80 md:flex md:flex-col xl:max-w-none xl:min-w-[320px] xl:w-[16.7vw]'
+                'flex flex-col border-r border-border-divider w-full h-full md:max-w-80 md:flex md:flex-col xl:max-w-none xl:min-w-[320px] xl:w-[16.7vw]'
             )}
         >
             <DialogOversiktHeader erVeileder={erVeileder} />

diff --git a/src/view/melding/Melding.tsx b/src/view/melding/Melding.tsx
@@ -1,5 +1,6 @@
 import { PersonIcon } from '@navikt/aksel-icons';
 import { BodyShort, Chat, Link } from '@navikt/ds-react';
+import classNames from 'classnames';
 import React from 'react';
 
 import { ViktigMelding } from '../../felleskomponenter/etiketer/Etikett';
@@ -45,8 +46,9 @@ export function Melding(props: Props) {
                 position={erMeldingFraBruker ? 'right' : 'left'}
                 backgroundColor={backgroundColor}
                 avatarBgColor={avatarBgColor}
+                className={classNames('p-0', { 'md:pl-16': erMeldingFraBruker, 'md:pr-16': !erMeldingFraBruker })}
             >
-                <Chat.Bubble>
+                <Chat.Bubble className="">
                     <div className="flex flex-col items-start">
                         <ViktigMelding visible={viktigMarkering} />
                         <span className="mt-2 whitespace-pre-wrap">{linkify(tekst)}</span>