B: Fix search bar width

rsconcept/frontend/src/components/input/search-bar.tsx

@@ -2,9 +2,6 @@ import clsx from 'clsx';
 
 import { IconSearch } from '@/components/icons';
 import { type Styling } from '@/components/props';
-
-import { TextInput } from './text-input';
-
 interface SearchBarProps extends Styling {
   /** Id of the search bar. */
   id?: string;
@@ -39,20 +36,23 @@ export function SearchBar({
   ...restProps
 }: SearchBarProps) {
   return (
-    <div className={clsx('relative flex items-center', className)} {...restProps}>
+    <div className={clsx('relative flex items-center grow', className)} {...restProps}>
       {!noIcon ? (
         <IconSearch className='absolute -top-0.5 left-2 translate-y-1/2 cc-search-icon' size='1.25rem' />
       ) : null}
-      <TextInput
+      <input
         id={id}
-        noOutline
-        transparent
-        placeholder={placeholder}
         type='search'
-        className={clsx('bg-transparent', !noIcon && 'pl-8')}
+        className={clsx(
-        noBorder={noBorder}
+          'min-w-0 py-2',
+          'leading-tight truncate hover:text-clip',
+          'bg-transparent',
+          !noIcon && 'pl-8',
+          !noBorder && 'border px-3'
+        )}
         value={query}
         onChange={event => onChangeQuery?.(event.target.value)}
+        placeholder={placeholder}
       />
     </div>
   );

rsconcept/frontend/src/index.css

@@ -85,7 +85,7 @@
 /* ========= shadcn theme ============ */
 
 :root {
-  --radius: 0.625rem;
+  /* --radius: 0.625rem; */
 
   --background: oklch(100% 0 0deg);
   --foreground: oklch(14.5% 0 0deg);
@@ -155,10 +155,10 @@
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
+  /* --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 4px); */
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);