feat: [M3-6941]- Uniform Spacing b/w Resource Link Columns In Empty State Landing Pages (#11213)

* Fix spacing for empty state landing pages

* Fix styling for mobile and empty youtube resource sections

* Add changeset

Author: carrillo-erik

packages/manager/.changeset/pr-11213-tech-stories-1731002638950.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Uniform Spacing b/w Resource Link Columns in Empty State Landing Pages ([#11213](https://github.com/linode/manager/pull/11213))

packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSection.tsx

@@ -18,13 +18,16 @@ const StyledResourcesLinksSection = styled('div', {
   display: 'grid',
   gridAutoColumns: '1fr',
   gridAutoFlow: 'column',
-  justifyItems: 'center',
-  maxWidth: props.wide === false ? 762 : '100%',
+  [theme.breakpoints.between('md', 'lg')]: {
+    width: 'auto',
+  },
   [theme.breakpoints.down(props.wide ? 'lg' : 'md')]: {
     gridAutoFlow: 'row',
     justifyItems: 'start',
+    maxWidth: props.wide === false ? 361 : '100%',
     rowGap: theme.spacing(8),
   },
+  width: props.wide === false ? 762 : '100%',
 }));
 
 export const ResourcesLinksSection = ({

packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx

@@ -17,6 +17,7 @@ const StyledResourcesLinksSubSection = styled('div', {
   '& > a': {
     display: 'inline-block',
     fontFamily: theme.font.bold,
+    width: '100%',
   },
   '& > h2': {
     color: theme.palette.text.primary,
@@ -34,7 +35,6 @@ const StyledResourcesLinksSubSection = styled('div', {
   fontSize: '0.875rem',
   gridTemplateRows: `22px minmax(${theme.spacing(3)}, 100%) 1.125rem`,
   rowGap: theme.spacing(2),
-  width: '100%',
 }));
 
 export const ResourcesLinksSubSection = (

packages/manager/src/components/Placeholder/Placeholder.tsx

@@ -2,13 +2,15 @@ import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import LinodeIcon from 'src/assets/addnewmenu/linode.svg';
-import { Button, ButtonProps } from 'src/components/Button/Button';
+import { Button } from 'src/components/Button/Button';
 import { H1Header } from 'src/components/H1Header/H1Header';
 import { Typography } from 'src/components/Typography';
 import { fadeIn } from 'src/styles/keyframes';
 
 import { TransferDisplay } from '../TransferDisplay/TransferDisplay';
 
+import type { ButtonProps } from 'src/components/Button/Button';
+
 export interface ExtendedButtonProps extends ButtonProps {
   target?: string;
 }

packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx

@@ -286,5 +286,3 @@ export const kubernetesLandingLazyRoute = createLazyRoute(
 )({
   component: KubernetesLanding,
 });
-
-export default KubernetesLanding;

packages/manager/src/features/Kubernetes/index.tsx

@@ -4,8 +4,10 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
-const KubernetesLanding = React.lazy(
-  () => import('./KubernetesLanding/KubernetesLanding')
+const KubernetesLanding = React.lazy(() =>
+  import('./KubernetesLanding/KubernetesLanding').then((module) => ({
+    default: module.KubernetesLanding,
+  }))
 );
 
 const ClusterCreate = React.lazy(() =>

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLandingEmptyState.tsx

@@ -39,6 +39,7 @@ export const PlacementGroupsLandingEmptyState = ({
       headers={headers}
       icon={LinodeIcon}
       linkAnalyticsEvent={linkAnalyticsEvent}
+      wide
     />
   );
 };

packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx

@@ -42,6 +42,7 @@ export const VPCEmptyState = () => {
       headers={headers}
       icon={NodeBalancerIcon}
       linkAnalyticsEvent={linkAnalyticsEvent}
+      wide
     />
   );
 };