From 299909ce9179381cbaa3fb873346e5a43c222ffe Mon Sep 17 00:00:00 2001
From: Marius Tobiassen Bungum <marius@mh2.no>
Date: Thu, 23 Jan 2025 08:51:06 +0100
Subject: [PATCH] :lipstick: Make 1280px the default max width of elements
 inside Template.Content

---
 src/organisms/FieldSelector/FieldSelector.tsx |  3 ++-
 src/organisms/Template/Template.tsx           | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/organisms/FieldSelector/FieldSelector.tsx b/src/organisms/FieldSelector/FieldSelector.tsx
index 082e2057f..63dfe5352 100644
--- a/src/organisms/FieldSelector/FieldSelector.tsx
+++ b/src/organisms/FieldSelector/FieldSelector.tsx
@@ -2,6 +2,7 @@ import { FC, useRef, useState } from 'react';
 
 import { tokens } from '@equinor/eds-tokens';
 
+import { Template } from '../Template/Template';
 import { SelectorCard } from './SelectorCard/SelectorCard';
 import { SelectorSkeleton } from './SelectorCard/Skeleton';
 import { ChangingField } from './ChangingField';
@@ -73,7 +74,7 @@ export const FieldSelector: FC<FieldSelectorProps> = ({
   }
 
   return (
-    <Container className="select-field">
+    <Container className={Template.FullWidth}>
       <ImageWrapper>
         <Waves />
       </ImageWrapper>
diff --git a/src/organisms/Template/Template.tsx b/src/organisms/Template/Template.tsx
index 734707e3d..21b42af1a 100644
--- a/src/organisms/Template/Template.tsx
+++ b/src/organisms/Template/Template.tsx
@@ -21,6 +21,8 @@ const Container = styled.div`
   display: flex;
 `;
 
+const FULLWIDTH_CLASSNAME = '.fullwidth';
+
 interface ContentProps {
   $open: boolean;
 }
@@ -34,8 +36,10 @@ const Content = styled.div<ContentProps>`
   overflow: auto;
   /* 231px and 64px is width of Sidebar when open/closed */
   min-width: calc(100% - ${(props) => (props.$open ? '231px' : '64px')});
-  &:not(:has(.select-field)) {
-    padding: 0 ${spacings.xxx_large};
+  &:not(:has(${FULLWIDTH_CLASSNAME})) {
+    padding: 0
+      max(${spacings.xxx_large}, calc(50% - ${spacings.xxx_large} - 1280px / 2));
+    margin: 0 auto;
   }
 `;
 
@@ -100,11 +104,13 @@ type TemplateType = IStyledComponent<'web', any> & {
   Container: IStyledComponent<'web', any>;
   Content: typeof Content;
   GlobalStyles: typeof GlobalStyles;
+  FullWidth: string;
 };
 
 export const Template = BaseTemplate as unknown as TemplateType;
 Template.Container = Container;
 Template.Content = Content;
 Template.GlobalStyles = GlobalStyles;
+Template.FullWidth = FULLWIDTH_CLASSNAME;
 
 export type { ContentProps, TemplateType };