✨(frontend) enhance dropdown menu and quick search components

- Added a horizontal separator to the dropdown menu for better visual
distinction between options.
- Updated padding in the quick search input for improved layout
consistency.
- Adjusted margin in the quick search group for better spacing.
- Increased vertical padding in quick search item content for enhanced
readability.
- Modified the horizontal separator to accept custom padding for more
flexible styling.
- Improved left panel styling to manage overflow behavior effectively.
- Removed unused skeleton loading styles from globals.css to clean up
the codebase.

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -1,4 +1,5 @@
-import { PropsWithChildren, useRef, useState } from 'react';
+import { HorizontalSeparator } from '@gouvfr-lasuite/ui-kit';
+import { Fragment, PropsWithChildren, useRef, useState } from 'react';
 import { css } from 'styled-components';
 
 import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
@@ -14,6 +15,7 @@ export type DropdownMenuOption = {
   isSelected?: boolean;
   disabled?: boolean;
   show?: boolean;
+  showSeparator?: boolean;
 };
 
 export type DropdownMenuProps = {
@@ -112,6 +114,7 @@ export const DropdownMenu = ({
           }
           const isDisabled = option.disabled !== undefined && option.disabled;
           return (
+            <Fragment key={option.label}>
               <BoxButton
                 role="menuitem"
                 aria-label={option.label}
@@ -177,6 +180,10 @@ export const DropdownMenu = ({
                   <Icon iconName="check" $size="20px" $theme="greyscale" />
                 )}
               </BoxButton>
+              {option.showSeparator && (
+                <HorizontalSeparator withPadding={false} />
+              )}
+            </Fragment>
           );
         })}
       </Box>

src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx

@@ -18,7 +18,7 @@ export const QuickSearchGroup = <T,>({
   renderElement,
 }: Props<T>) => {
   return (
-    <Box $margin={{ top: 'base' }}>
+    <Box $margin={{ top: 'sm' }}>
       <Command.Group
         key={group.groupName}
         heading={group.groupName}

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -44,7 +44,7 @@ export const QuickSearchInput = ({
         $align="center"
         className="quick-search-input"
         $gap={spacingsTokens['2xs']}
-        $padding={{ all: 'base' }}
+        $padding={{ horizontal: 'base', vertical: 'sm' }}
       >
         {!loading && <Icon iconName="search" $variation="600" />}
         {loading && (

src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx

@@ -24,8 +24,9 @@ export const QuickSearchItemContent = ({
     <Box
       $direction="row"
       $align="center"
-      $padding={{ horizontal: '2xs', vertical: '3xs' }}
+      $padding={{ horizontal: '2xs', vertical: '4xs' }}
       $justify="space-between"
+      $minHeight="34px"
       $width="100%"
     >
       <Box

src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx

@@ -1,4 +1,5 @@
 import { useCunninghamTheme } from '@/cunningham';
+import { Spacings } from '@/utils';
 
 import { Box } from '../Box';
 
@@ -10,19 +11,25 @@ export enum SeparatorVariant {
 type Props = {
   variant?: SeparatorVariant;
   $withPadding?: boolean;
+  customPadding?: Spacings;
 };
 
 export const HorizontalSeparator = ({
   variant = SeparatorVariant.LIGHT,
   $withPadding = true,
+  customPadding,
 }: Props) => {
   const { colorsTokens } = useCunninghamTheme();
 
+  const padding = $withPadding
+    ? (customPadding ?? 'base')
+    : ('none' as Spacings);
+
   return (
     <Box
       $height="1px"
       $width="100%"
-      $margin={{ vertical: $withPadding ? 'base' : 'none' }}
+      $margin={{ vertical: padding }}
       $background={
         variant === SeparatorVariant.DARK
           ? '#e5e5e533'

src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx

@@ -70,6 +70,8 @@ export const LeftPanel = () => {
               position: fixed;
               transform: translateX(${isPanelOpen ? '0' : '-100dvw'});
               background-color: var(--c--theme--colors--greyscale-000);
+              overflow-y: auto;
+              overflow-x: hidden;
             `}
             className="--docs--left-panel-mobile"
           >