Fikset noen layouttting som ødela ved veldig høy zoom.

navikt · Dec 19, 2024 · 93c9122 · 93c9122
1 parent 06c1f08
commit 93c9122
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 5 deletions.
diff --git a/client/src/Pages/MineSaker/MineSakerside.tsx b/client/src/Pages/MineSaker/MineSakerside.tsx
@@ -34,6 +34,7 @@ const MineSakerListe = styled.div`
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    max-width: 100%;
 `;
 
 

diff --git a/client/src/Pages/MineSaker/SamarbeidsInnhold.tsx b/client/src/Pages/MineSaker/SamarbeidsInnhold.tsx
@@ -15,6 +15,7 @@ const Innhold = styled.div`
     display: flex;
     flex-direction: row;
     align-items: space-between;
+    flex-wrap: wrap;
 `;
 
 const CardContentLeft = styled.div`

diff --git a/client/src/Pages/Virksomhet/Kartlegging/BehovsvurderingCardHeaderInnhold.tsx b/client/src/Pages/Virksomhet/Kartlegging/BehovsvurderingCardHeaderInnhold.tsx
@@ -42,6 +42,7 @@ const StyledExpansionCardHeader = styled(ExpansionCard.Header)`
         justify-content: space-between;
         align-items: flex-start;
         flex-grow: 1;
+        flex-wrap: wrap;
     }
 `;
 
@@ -62,13 +63,15 @@ const StyledEmptyCardHeader = styled.div`
     border: var(--__ac-expansioncard-border-width) solid
         var(--__ac-expansioncard-border-color);
     justify-content: space-between;
+    flex-wrap: wrap;
 `;
 
 const HeaderRightContent = styled.span`
     display: flex;
     align-items: center;
     font-size: 1rem;
     align-self: center;
+    flex-wrap: wrap;
 `;
 
 const BehovsvurderingDato = styled.span`

diff --git a/client/src/Pages/Virksomhet/Plan/InnholdOppsett.tsx b/client/src/Pages/Virksomhet/Plan/InnholdOppsett.tsx
@@ -18,7 +18,8 @@ import { loggEndringAvPlan } from "../../../util/amplitude-klient";
 
 const InnholdsRad = styled(HStack)`
     margin-bottom: 0.5rem;
-    min-width: 48rem;
+    max-width: 100%;
+    flex-wrap: wrap;
 `;
 
 // Noe ødelegger --a-spacing-6 så vi setter det manuelt. Bør ta en titt og finne ut hva som ødelegger det senere.

diff --git a/client/src/Pages/Virksomhet/Plan/LeggTilTemaKnapp.tsx b/client/src/Pages/Virksomhet/Plan/LeggTilTemaKnapp.tsx
@@ -27,6 +27,7 @@ const UndertemaSetupContainer = styled.div`
 
 const LeggTilTemaModal = styled(Modal)`
     max-width: 72rem;
+    width: 100%;
 `;
 
 export default function LeggTilTemaKnapp({
@@ -164,7 +165,7 @@ export default function LeggTilTemaKnapp({
                 onClose={() => setModalOpen(false)}
                 aria-label="Legg til tema"
             >
-                <Modal.Body>
+                <Modal.Body style={{ overflowY: "auto" }}>
                     <CheckboxGroup
                         legend="Sett opp samarbeidsplan"
                         value={redigertTemaliste.map((tema) =>
@@ -178,7 +179,7 @@ export default function LeggTilTemaKnapp({
                                     return a.id - b.id;
                                 })
                                 .map((tema) => (
-                                    <div key={tema.id}>
+                                    <React.Fragment key={tema.id}>
                                         <Checkbox value={tema.id}>
                                             {tema.navn}
                                         </Checkbox>
@@ -200,7 +201,7 @@ export default function LeggTilTemaKnapp({
                                                 />
                                             </UndertemaSetupContainer>
                                         )}
-                                    </div>
+                                    </React.Fragment>
                                 ))}
                     </CheckboxGroup>
                     <br />

diff --git a/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx b/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx
@@ -61,6 +61,7 @@ const StyledEmptyCardHeader = styled.div`
     border: var(--__ac-expansioncard-border-width) solid
         var(--__ac-expansioncard-border-color);
     justify-content: space-between;
+    flex-wrap: wrap;
 `;
 
 const HeaderRightContent = styled.span`

diff --git a/client/src/Pages/Virksomhet/Samarbeid/SamarbeidsDropdown.tsx b/client/src/Pages/Virksomhet/Samarbeid/SamarbeidsDropdown.tsx
@@ -73,7 +73,7 @@ export const SamarbeidsDropdown = ({
 
                 <Dropdown.Menu
                     style={{
-                        minWidth: "22rem",
+                        width: "22rem",
                         marginTop: "0.3rem",
                         padding: 0,
                     }}

diff --git a/...t/src/Pages/Virksomhet/Virksomhetsoversikt/IASakStatus/EndreStatusModal/Statusknapper.tsx b/...t/src/Pages/Virksomhet/Virksomhetsoversikt/IASakStatus/EndreStatusModal/Statusknapper.tsx
@@ -27,6 +27,7 @@ const Knappecontainer = styled.div<{ $redusertPadding: boolean }>`
     justify-content: space-between;
     align-items: center;
     padding: ${(props) => (props.$redusertPadding ? "0.5rem" : "1.5rem")};
+    flex-wrap: wrap;
 `;
 
 const EnkeltKnappContainer = styled(Knappecontainer)`

diff --git a/...ges/Virksomhet/Virksomhetsoversikt/VirksomhetsinfoHeader/VirksomhetOgSamarbeidsHeader.tsx b/...ges/Virksomhet/Virksomhetsoversikt/VirksomhetsinfoHeader/VirksomhetOgSamarbeidsHeader.tsx
@@ -131,6 +131,7 @@ export default function VirksomhetOgSamarbeidsHeader({
                         placement="right-start"
                         onClose={() => setOpenState(false)}
                         anchorEl={buttonRef.current}
+                        style={{ overflow: "auto" }}
                     >
                         <VirksomhetsInfoPopoverInnhold
                             iaSak={iaSak}

diff --git a/client/src/components/Spørreundersøkelse/TemaResultat.tsx b/client/src/components/Spørreundersøkelse/TemaResultat.tsx
@@ -11,6 +11,10 @@ const TemaContainer = styled.div`
     width: 100%;
     padding-bottom: 4rem;
     gap: 2rem;
+
+    @media screen and (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
 `;
 
 const TemaGrafContainer = styled.div`