Fix box shadow

Author: tsck

packages/code-editor/src/SearchForm/SearchForm.styles.ts

@@ -20,13 +20,38 @@ const getBaseContainerStyles = (theme: Theme) => css`
   ]};
   border-bottom-left-radius: ${borderRadius[150]}px;
   border-bottom-right-radius: ${borderRadius[150]}px;
-  box-shadow: ${shadow[theme][100]};
   width: 100%;
   max-width: ${CONTAINER_MAX_WIDTH}px;
+  position: relative;
   display: grid;
   grid-template-rows: ${SECTION_HEIGHT}px 0fr;
-  overflow: hidden;
   transition: grid-template-rows ${transitionDuration.slower}ms ease-in-out;
+  z-index: 1;
+
+  /** Add a shadow to the container while clipping the right edge*/
+  &::after {
+    content: '';
+
+    /** Position the pseudo-element to match the parent's size and location */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    /** Apply the shadow to the pseudo-element */
+    box-shadow: ${shadow[theme][100]};
+
+    /** Negative values expand the clipping area outward, revealing the shadow. */
+    /** A zero value clips the shadow exactly at the element's edge. */
+    clip-path: inset(-20px 0px -20px -20px);
+
+    /** Match the parent's border-radius for consistency */
+    border-radius: inherit;
+
+    /** Places the pseudo-element behind the parent element */
+    z-index: -1;
+  }
 `;
 
 const openContainerStyles = css`