style: replace NoItemsFoundText with PersistentNoItemsFoundText to prevent layout shift

Author: benjamin-lyon

src/molecules/Select/GroupedSelectPersistent.tsx

@@ -4,8 +4,8 @@ import { SelectOptionRequired } from 'src/molecules';
 import { useGroupedSelectItems } from 'src/molecules/Select/Select.hooks';
 import {
   GroupTitle,
-  NoItemsFoundText,
   PersistentGroupsWrapper,
+  PersistentNoItemsFoundText,
 } from 'src/molecules/Select/Select.styles';
 import {
   CustomMenuItemComponentProps,
@@ -38,7 +38,7 @@ export const GroupedSelectPersistent = <T extends SelectOptionRequired>(
   const { filteredGroups, filteredGroupSum } = useGroupedSelectItems(props);
 
   if (filteredGroups.length === 0) {
-    return <NoItemsFoundText>No items found</NoItemsFoundText>;
+    return <PersistentNoItemsFoundText>No items found</PersistentNoItemsFoundText>;
   }
 
   // This case never happens, since there is a check in select.tsx. This check gives the correct typescript inference.

src/molecules/Select/ListSelectPersistent.tsx

@@ -3,8 +3,8 @@ import { capitalize } from 'src/atoms';
 import { useListSelectItems } from 'src/molecules/Select/Select.hooks';
 import {
   GroupTitle,
-  NoItemsFoundText,
   NoTagFoundText,
+  PersistentNoItemsFoundText,
 } from 'src/molecules/Select/Select.styles';
 import {
   CustomMenuItemComponentProps,
@@ -40,7 +40,9 @@ export const ListSelectPersistent = <T extends SelectOptionRequired>(
   const { filteredItems } = useListSelectItems(props);
 
   if (filteredItems.length === 0 && (!props.onAddItem || search === '')) {
-    return <NoItemsFoundText>No items found</NoItemsFoundText>;
+    return (
+      <PersistentNoItemsFoundText>No items found</PersistentNoItemsFoundText>
+    );
   }
 
   const hasNestedItems = filteredItems.some(

src/molecules/Select/Select.styles.ts

@@ -10,6 +10,9 @@ import { Chip } from 'src/molecules/Chip/Chip';
 
 import styled, { css } from 'styled-components';
 
+// Persistent mode keeps an explicit item height so the empty state matches without layout shift
+const PERSISTENT_ITEM_HEIGHT = '56px'; // PersistentListItem: 2×spacings.medium padding + 24px line-height
+
 interface WrapperProps {
   $showBackgroundColor: boolean;
 }
@@ -320,6 +323,7 @@ const PersistentListItem = styled.button`
   padding: ${spacings.medium} ${spacings.medium};
   justify-content: flex-start;
   gap: ${spacings.small};
+  min-height: ${PERSISTENT_ITEM_HEIGHT};
   box-sizing: border-box;
   svg {
     flex-shrink: 0;
@@ -366,12 +370,19 @@ const NoTagFoundText = styled(Typography)`
   margin: ${spacings.medium};
 `;
 
-const NoItemsFoundText = styled(Typography)`
+const NoItemsFoundText = styled(Typography).attrs({
+  group: 'navigation',
+  variant: 'menu_title',
+})`
   display: flex;
   align-items: center;
   margin: 0;
   padding: ${spacings.medium};
-  min-height: 56px; // Height of one menu item to avoid layout shift
+  box-sizing: border-box;
+`;
+
+const PersistentNoItemsFoundText = styled(NoItemsFoundText)`
+  min-height: ${PERSISTENT_ITEM_HEIGHT};
 `;
 
 const StyledMenu = styled(EDSMenu)`
@@ -407,6 +418,7 @@ export {
   StyledMenu,
   NoTagFoundText,
   NoItemsFoundText,
+  PersistentNoItemsFoundText,
   PlaceholderText,
   PersistentListItem,
   PersistentComboBoxWrapper,