fix: adjust styling for component (#5375)

Author: mykalmax

web/common/src/components/Metadata/Metadata.tsx

@@ -20,12 +20,22 @@ export const Metadata = React.forwardRef<HTMLDivElement, MetadataProps>(
         {...props}
       >
         {typeof label === 'string' ? (
-          <div className="text-metadata-label">{label}</div>
+          <div
+            title={label}
+            className="text-metadata-label truncate shrink-0"
+          >
+            {label}
+          </div>
         ) : (
           label
         )}
         {typeof value === 'string' ? (
-          <div className="text-metadata-value font-semibold">{value}</div>
+          <div
+            title={value}
+            className="text-metadata-value font-semibold truncate"
+          >
+            {value}
+          </div>
         ) : (
           value
         )}

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

@@ -192,6 +192,7 @@ export const ModelName = React.forwardRef<HTMLDivElement, ModelNameProps>(
         {showCopy && (
           <CopyButton
             size="2xs"
+            variant="transparent"
             text={name}
             className="ml-2 w-6 hover:text-model-name-copy-icon-hover active:text-model-name-copy-icon-hover"
           >