fix: search and breadcrumbs size (#546)

Author: PolinaGurinovich97

src/components/Breadcrumb/constants.tsx

@@ -9,8 +9,7 @@ export const breadcrumbListClassName =
 export const breadcrumbItemBaseClassName =
   'flex items-center gap-2 min-w-0 shrink-0 dial-small';
 
-export const breadcrumbItemVisibleClassName =
-  'max-w-[20%] basis-[20%] flex-none';
+export const breadcrumbItemVisibleClassName = 'basis-[20%] flex-none';
 export const breadcrumbItemLastClassName = 'flex-1 min-w-0';
 
 export const breadcrumbLinkBaseClassName =

src/components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel.spec.tsx

@@ -114,7 +114,7 @@ describe('Dial UI Kit :: DialFileManagerNavigationPanel', () => {
       <DialFileManagerNavigationPanel path="Root" isCompactView searchable />,
     );
     const searchContainer = screen.getByRole('search');
-    expect(searchContainer).toHaveClass('w-[38px]');
+    expect(searchContainer).toHaveClass('w-[40px]');
   });
 
   test('search container expands to full width when clicked in compact view', () => {

src/components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel.tsx

@@ -281,7 +281,7 @@ export const DialFileManagerNavigationPanel: FC<
       {searchable && (
         <div
           className={mergeClasses(searchContainerWrapperClassName, {
-            'w-[38px]': isCompactView && !isSearchExpanded,
+            'w-[40px]': isCompactView && !isSearchExpanded,
             'w-full': isCompactView && isSearchExpanded,
           })}
           role="search"
@@ -296,9 +296,10 @@ export const DialFileManagerNavigationPanel: FC<
             onBlur={handleSearchBlur}
             invalid={invalid}
             className={searchClassName}
-            containerClassName={mergeClasses(searchContainerClassName, {
-              'p-[10px]': isCompactView,
-            })}
+            wrapperClassName={
+              isCompactView && !isSearchExpanded ? 'pl-2.5' : ''
+            }
+            containerClassName={searchContainerClassName}
           />
         </div>
       )}