fix scrollbar styling

Author: mykalmax

web/common/src/components/ModelName/ModelName.stories.tsx

@@ -76,7 +76,7 @@ export const Grayscale: Story = {
 export const Link: Story = {
   args: {
     name: 'catalog.schema.model',
-    link: 'https://www.google.com',
+    renderLink: modelName => <a href="https://www.google.com">{modelName}</a>,
     grayscale: false,
     showCopy: true,
   },
@@ -85,7 +85,7 @@ export const Link: Story = {
 export const LinkGrayscale: Story = {
   args: {
     name: 'catalog.schema.model',
-    link: 'https://www.google.com',
+    renderLink: modelName => <a href="https://www.google.com">{modelName}</a>,
     grayscale: true,
     showCopy: true,
   },

web/common/src/components/ModelName/ModelName.tsx

@@ -19,7 +19,7 @@ export interface ModelNameProps extends React.HTMLAttributes<HTMLDivElement> {
   truncateLimitBefore?: number
   truncateLimitAfter?: number
   grayscale?: boolean
-  link?: string
+  renderLink?: (modelName: React.ReactNode) => React.ReactNode
   className?: string
 }
 
@@ -39,7 +39,7 @@ export const ModelName = React.forwardRef<HTMLDivElement, ModelNameProps>(
       truncateLimitBefore = 5,
       truncateLimitAfter = 7,
       grayscale = false,
-      link,
+      renderLink,
       className,
       ...props
     },
@@ -94,7 +94,7 @@ export const ModelName = React.forwardRef<HTMLDivElement, ModelNameProps>(
             grayscale
               ? 'text-model-name-grayscale-model'
               : 'text-model-name-model',
-            link && '-mt-[4px]',
+            renderLink && '-mt-[4px]',
           )}
         />
       )
@@ -174,18 +174,17 @@ export const ModelName = React.forwardRef<HTMLDivElement, ModelNameProps>(
         {...props}
       >
         {!hideIcon && renderIcon()}
-        {link ? (
-          <a
-            href={link}
+        {renderLink ? (
+          <span
             className={cn(
               'flex cursor-pointer border-b -mt-0.5 text-inherit',
               grayscale
                 ? 'border-model-name-grayscale-link-underline hover:border-model-name-grayscale-link-underline-hover'
                 : 'border-model-name-link-underline hover:border-model-name-link-underline-hover',
             )}
           >
-            {renderNameWithTooltip()}
-          </a>
+            {renderLink(renderNameWithTooltip())}
+          </span>
         ) : (
           renderNameWithTooltip()
         )}

web/common/src/components/ScrollContainer/ScrollContainer.css

@@ -1,4 +1,4 @@
 :root {
   --scrollbar-thumb: var(--color-neutral-300);
-  --scrollbar-track: var(--color-neutral-100);
+  --scrollbar-track: var(--color-transparent);
 }