🎨(front) improvement search input scroll (#49)

improvement search input scroll and margin

CHANGELOG.md

@@ -8,11 +8,12 @@ and this project adheres to
 
 ## [Unreleased]
 
-- ✨(404) fix front 404 page
-- ✅(chat) add frontend feature flags #29
+- 🎨(front) improvement search input scroll
 
 ### Changed
 
+- ✨(404) fix front 404 page
+- ✅(chat) add frontend feature flags #29
 - 🎨(front) change list attachment in chat
 - 🎨(front) move emplacement for attachment
 - 🎨(ui) retour ui sources files

src/frontend/apps/conversations/src/components/quick-search/QuickSearch.tsx

@@ -50,18 +50,46 @@ export const QuickSearch = ({
       <QuickSearchStyle />
       <Command label={label} shouldFilter={false} ref={ref}>
         {showInput && (
-          <QuickSearchInput
-            withSeparator={hasChildrens(children)}
-            inputValue={inputValue}
-            onFilter={onFilter}
-            onClear={onClear}
-            placeholder={placeholder}
+          <Box
+            $css={`
+              position: sticky;
+              top: 0px;
+              &:before {
+                content: "";
+                background-color: #F7F8FA;
+                position: absolute;
+                width: 100%;
+                height: 20px;
+                top: -8px;
+              }
+              &:after {
+                content: "";
+                position: absolute;
+                width: 100%;
+                height: 20px;
+                bottom: -20px;
+                background: linear-gradient(
+                  to bottom,
+                  #F7F8FA 0%,
+                  rgba(247, 248, 250, 0.7) 40%,
+                  rgba(255, 255, 255, 0) 100%
+                );
+              }
+              }`}
           >
-            {inputContent}
-          </QuickSearchInput>
+            <QuickSearchInput
+              withSeparator={hasChildrens(children)}
+              inputValue={inputValue}
+              onFilter={onFilter}
+              onClear={onClear}
+              placeholder={placeholder}
+            >
+              {inputContent}
+            </QuickSearchInput>
+          </Box>
         )}
         <Command.List>
-          <Box $padding={{ horizontal: 'sm', top: 'sm' }}>{children}</Box>
+          <Box $padding={{ horizontal: 'xs', top: 'sm' }}>{children}</Box>
         </Command.List>
       </Command>
     </>

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

@@ -74,7 +74,6 @@ export const QuickSearchInput = ({
         $align="center"
         $gap={spacingsTokens['2xs']}
         $css={`
-          position: relative;
           justify-content: space-between;
           border-radius: 4px;
           margin: 12px 12px 0 12px;

src/frontend/apps/conversations/src/components/quick-search/QuickSearchStyle.tsx

@@ -2,9 +2,10 @@ import { createGlobalStyle } from 'styled-components';
 
 export const QuickSearchStyle = createGlobalStyle`
   .quick-search-container {
+    position: relative;
     [cmdk-root] {
         width: 100%;
-        background: #ffffff;
+        position: relative;
         border-radius: 12px;
         overflow: hidden;
         transition: transform 100ms ease;

src/frontend/apps/conversations/src/features/home/components/HomeBanner.tsx

@@ -81,7 +81,7 @@ export default function HomeBanner() {
           </Text>*/}
           <Text $variation="500">
             {t(
-              'You have access to an alpha version of the service, tested internally. It has a limited scope and may contain bugs. Your feedback is essential to help us improve it. Your feedback is essential to help us improve it.',
+              'You are accessing an alpha version, tested internally, with limited scope and likely to contain bugs. Your feedback is essential to improve it. By clicking on "Participate", you agree to the analysis of your usage data to optimize the application; this analysis can be disabled at any time.',
             )}
           </Text>
 

src/frontend/apps/conversations/src/features/left-panel/components/LeftPanelContent.tsx

@@ -16,6 +16,7 @@ export const LeftPanelContent = () => {
       $css={`
         overflow-y: auto;
         overflow-x: hidden;
+        position: relative;
         height: calc(100dvh - ${isDesktop ? '52px' : '104px'});
       `}
     >
@@ -25,16 +26,10 @@ export const LeftPanelContent = () => {
         </Box>
       )}
       <Box
-        $position="sticky"
-        $zIndex="100"
         $css={`
-          top: 0;
-          background: linear-gradient(
-            to bottom,
-            rgba(255, 255, 255, 1) 0%,
-            rgba(255, 255, 255, 1) 70%,
-            rgba(255, 255, 255, 0) 100%
-          );
+          z-index: 100;
+          position: sticky;
+          top: 0px;
         `}
       >
         <LeftPanelSearch onSearchChange={setHasSearch} />

src/frontend/apps/conversations/src/features/left-panel/components/LeftPanelConversations.tsx

@@ -26,9 +26,9 @@ export const LeftPanelConversations = () => {
   }
 
   return (
-    <Box className="--conversations--left-panel-favorites">
+    <Box>
       <Box
-        $padding={{ horizontal: 'sm', top: 'sm' }}
+        $padding={{ horizontal: 'xs' }}
         $gap={spacingsTokens['2xs']}
         $height="50vh"
         data-testid="left-panel-favorites"