style: Allow dataset metadata tags to wrap

CHANGELOG.md

@@ -28,6 +28,8 @@ You can also check the
   - Dataset browse view is now correctly displayed on mobile devices
   - Database-related actions are now hidden in preview mode (copy URL, share)
   - Chart titles in user profile are now correctly rendered
+- Styles
+  - Dataset tags can now wrap
 - Security
   - Added additional protection against data source URL injection
   - Removed feature flag for custom GraphQL endpoint

app/components/dataset-metadata.tsx

@@ -234,15 +234,15 @@ const DatasetTags = ({ cube }: { cube: DataCubeMetadata }) => {
   );
 };
 
-type DatasetMetadataTagProps = {
+const DatasetMetadataTag = ({
+  type,
+  iri,
+  label,
+}: {
   type: "organization" | "theme";
   iri: string;
   label?: string | null;
-};
-
-const DatasetMetadataTag = (props: DatasetMetadataTagProps) => {
-  const { type, iri, label } = props;
-
+}) => {
   return (
     <NextLink
       key={iri}
@@ -256,10 +256,9 @@ const DatasetMetadataTag = (props: DatasetMetadataTagProps) => {
         underline="none"
         title={label ?? undefined}
         sx={{
+          display: "inline-block",
           maxWidth: "100%",
-          whiteSpace: "nowrap",
-          textOverflow: "ellipsis",
-          overflow: "hidden",
+          borderRadius: "16px",
           color: "text.primary",
         }}
       >

app/components/tag.tsx

@@ -18,7 +18,7 @@ const TagTypography = styled(Typography)(({ theme }) => ({
   width: "fit-content",
   minHeight: 24,
   padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-  borderRadius: 999,
+  borderRadius: "16px",
   transition: "box-shadow 0.2s ease",
 }));