fix: [M3-7331] - VPC and StackScript details overflow

packages/manager/.changeset/pr-9887-fixed-1699470171696.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Overflow for VPC and StackScript detail descriptions and cut off placeholder text in VPC search bar ([#9887](https://github.com/linode/manager/pull/9887))

packages/manager/src/components/StackScript/StackScript.tsx

@@ -1,10 +1,10 @@
 import { StackScript as StackScriptType } from '@linode/api-v4/lib/stackscripts';
-import { Box } from 'src/components/Box';
 import { Theme, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
+import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Chip } from 'src/components/Chip';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
@@ -49,7 +49,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
     marginTop: theme.spacing(1),
   },
   description: {
+    overflowWrap: 'anywhere',
     whiteSpace: 'pre-wrap',
+    wordBreak: 'normal',
   },
   descriptionText: {
     marginBottom: theme.spacing(2),
@@ -85,7 +87,7 @@ interface StackScriptImages {
   deprecated: JSX.Element[];
 }
 
-export const StackScript = (props: StackScriptProps) => {
+export const StackScript = React.memo((props: StackScriptProps) => {
   const {
     data: {
       deployments_active,
@@ -275,6 +277,4 @@ export const StackScript = (props: StackScriptProps) => {
       <ScriptCode script={script} />
     </div>
   );
-};
-
-export default React.memo(StackScript);
+});

packages/manager/src/features/StackScripts/StackScriptDialog.tsx

@@ -6,7 +6,7 @@ import { MapDispatchToProps, connect } from 'react-redux';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { Notice } from 'src/components/Notice/Notice';
-import _StackScript from 'src/components/StackScript';
+import { StackScript as _StackScript } from 'src/components/StackScript/StackScript';
 import { ApplicationState } from 'src/store';
 import { closeStackScriptDialog } from 'src/store/stackScriptDialog';
 import { MapState } from 'src/store/types';

packages/manager/src/features/StackScripts/StackScriptsDetail.tsx

@@ -10,7 +10,7 @@ import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { NotFound } from 'src/components/NotFound';
-import _StackScript from 'src/components/StackScript';
+import { StackScript as _StackScript } from 'src/components/StackScript/StackScript';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useGrants } from 'src/queries/profile';
 import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';

packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Box } from 'src/components/Box';
+import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 import { CircleProgress } from 'src/components/CircleProgress/CircleProgress';
 import { DismissibleBanner } from 'src/components/DismissibleBanner';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -160,15 +161,15 @@ const VPCDetail = () => {
                 Description
               </span>{' '}
             </Typography>
-            <Typography>
+            <Typography sx={{ overflowWrap: 'anywhere', wordBreak: 'normal' }}>
               {description}{' '}
               {description.length > 150 && (
-                <button
+                <StyledLinkButton
                   onClick={() => setShowFullDescription((show) => !show)}
-                  style={{ ...theme.applyLinkStyles, fontSize: '0.875rem' }}
+                  sx={{ fontSize: '0.875rem' }}
                 >
                   Read {showFullDescription ? 'Less' : 'More'}
-                </button>
+                </StyledLinkButton>
               )}
             </Typography>
           </StyledDescriptionBox>

packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx

@@ -257,16 +257,14 @@ export const VPCSubnetsTable = (props: Props) => {
 
   return (
     <>
-      <Box
-        display="flex"
-        justifyContent="space-between"
-        paddingBottom={theme.spacing(2)}
-      >
+      <Box display="flex" flexWrap="wrap" justifyContent="space-between">
         <DebouncedSearchTextField
           sx={{
+            marginBottom: theme.spacing(2),
             [theme.breakpoints.up('sm')]: {
               width: '416px',
             },
+            width: '250px',
           }}
           debounceTime={250}
           hideLabel
@@ -276,6 +274,9 @@ export const VPCSubnetsTable = (props: Props) => {
           placeholder="Filter Subnets by label or id"
         />
         <Button
+          sx={{
+            marginBottom: theme.spacing(2),
+          }}
           buttonType="primary"
           onClick={() => setSubnetCreateDrawerOpen(true)}
         >