make links in environment card wrap

equinor · Nov 25, 2024 · 18ff6ba · 18ff6ba
1 parent 6b60ff4
commit 18ff6ba
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 31 deletions.
diff --git a/src/components/environments-summary/environment-card.tsx b/src/components/environments-summary/environment-card.tsx
@@ -53,11 +53,8 @@ const DeploymentDetails: FunctionComponent<{
   deployment: Readonly<DeploymentSummary>;
 }> = ({ appName, deployment }) =>
   !deployment ? (
-    <Typography
-      color="disabled"
-      className="grid grid--auto-columns grid--gap-small grid--align-center"
-    >
-      <Icon data={link} />
+    <Typography color="disabled">
+      <Icon data={link} style={{ marginRight: 'var(--eds_spacing_small)' }} />
       No active deployment
     </Typography>
   ) : (
@@ -67,15 +64,13 @@ const DeploymentDetails: FunctionComponent<{
       link
       token={{ textDecoration: 'none' }}
     >
-      <span className="grid grid--auto-columns grid--gap-small grid--align-center">
-        <Icon data={send} />
-        <Typography as="span" color="primary">
-          deployment{' '}
-          <Typography as="span" color="gray">
-            (<RelativeToNow time={new Date(deployment.activeFrom)} />)
-          </Typography>
+      <Icon data={send} style={{ marginRight: 'var(--eds_spacing_small)' }} />
+      <Typography as="span" color="primary">
+        deployment{' '}
+        <Typography as="span" color="gray">
+          (<RelativeToNow time={new Date(deployment.activeFrom)} />)
         </Typography>
-      </span>
+      </Typography>
     </Typography>
   );
 
@@ -161,11 +156,11 @@ export const EnvironmentCard: FunctionComponent<EnvironmentCardProps> = ({
     ? {
         header: <></>,
         body: (
-          <Typography
-            color="disabled"
-            className="grid grid--auto-columns grid--gap-small grid--align-center"
-          >
-            <Icon data={link} />
+          <Typography color="disabled">
+            <Icon
+              data={link}
+              style={{ marginRight: 'var(--eds_spacing_small)' }}
+            />
             No link available
           </Typography>
         ),

diff --git a/src/components/environments-summary/environment-ingress.tsx b/src/components/environments-summary/environment-ingress.tsx
@@ -34,8 +34,8 @@ const ComponentDetails: FunctionComponent<{
   icon: IconData;
   component: Readonly<Component>;
 }> = ({ icon, component }) => (
-  <span className="grid grid--auto-columns grid--gap-small grid--align-center">
-    <Icon data={icon} />
+  <>
+    <Icon data={icon} style={{ marginRight: 'var(--eds_spacing_small)' }} />
     <Typography
       as="span"
       token={{
@@ -46,7 +46,7 @@ const ComponentDetails: FunctionComponent<{
     >
       {component.name}
     </Typography>
-  </span>
+  </>
 );
 
 export const EnvironmentIngress: FunctionComponent<EnvironmentIngressProps> = ({
@@ -82,21 +82,19 @@ export const EnvironmentIngress: FunctionComponent<EnvironmentIngressProps> = ({
           <ExternalLink
             key={component.name}
             href={`https://${component.variables[URL_VAR_NAME]}`}
-            className="grid grid--auto-columns grid--gap-x-small grid--align-center"
+            className=""
           >
             <ComponentDetails icon={link} component={component} />
           </ExternalLink>
         ))
       ) : (
-        <span>
-          <Typography
-            color="disabled"
-            className="grid grid--auto-columns grid--gap-small grid--align-center"
-          >
-            <Icon data={link} />
-            No link available
-          </Typography>
-        </span>
+        <Typography color="disabled">
+          <Icon
+            data={link}
+            style={{ marginRight: 'var(--eds_spacing_small)' }}
+          />
+          No link available
+        </Typography>
       )}
       {comps.passive
         .filter(({ status }) => status === 'Outdated')