@redocly/theme 0.52.0-next.2 → 0.52.0-next.4

package/lib/icons/WarningAltFilled/WarningAltFilled.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningAltFilled = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M8.001 3.08571H7.999L2.32435 13.9983L2.3253 14H13.6747L13.6757 13.9983L8.001 3.08571ZM7.4375 6.00001H8.5625V10.5H7.4375V6.00001ZM8 13C7.85167 13 7.70666 12.956 7.58333 12.8736C7.45999 12.7912 7.36386 12.6741 7.30709 12.537C7.25033 12.4 7.23548 12.2492 7.26441 12.1037C7.29335 11.9582 7.36478 11.8246 7.46967 11.7197C7.57456 11.6148 7.7082 11.5434 7.85369 11.5144C7.99917 11.4855 8.14997 11.5003 8.28702 11.5571C8.42406 11.6139 8.54119 11.71 8.62361 11.8333C8.70602 11.9567 8.75 12.1017 8.75 12.25C8.75 12.4489 8.67099 12.6397 8.53033 12.7803C8.38968 12.921 8.19892 13 8 13Z" }),
+    react_1.default.createElement("path", { d: "M14.5 15H1.5C1.4141 15 1.32965 14.9779 1.25478 14.9357C1.17992 14.8936 1.11718 14.8329 1.0726 14.7595C1.02802 14.686 1.00311 14.6024 1.00027 14.5165C0.997436 14.4307 1.01677 14.3455 1.0564 14.2693L7.5564 1.76931C7.59862 1.68812 7.66231 1.62008 7.74053 1.5726C7.81875 1.52511 7.9085 1.5 8 1.5C8.09151 1.5 8.18126 1.52511 8.25948 1.5726C8.3377 1.62008 8.40138 1.68812 8.4436 1.76931L14.9436 14.2693C14.9832 14.3455 15.0026 14.4307 14.9997 14.5165C14.9969 14.6024 14.972 14.686 14.9274 14.7595C14.8828 14.8329 14.8201 14.8936 14.7452 14.9357C14.6704 14.9779 14.5859 15 14.5 15ZM2.3253 14H13.6747L13.6757 13.9983L8.001 3.08571H7.999L2.32435 13.9983L2.3253 14Z" })));
+exports.WarningAltFilled = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/WarningAltFilled/WarningAltFilled',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=WarningAltFilled.js.map

package/lib/index.d.ts

@@ -39,7 +39,6 @@ export * from './components/Footer/Footer';
 export * from './components/Footer/FooterColumn';
 export * from './components/Footer/FooterCopyright';
 export * from './components/Footer/FooterItem';
-export * from './components/Footer/FooterLogo';
 export * from './components/Typography/CompactTypography';
 export * from './components/Typography/Emphasis';
 export * from './components/Typography/H1';
@@ -102,6 +101,7 @@ export * from './components/Catalog/CatalogCard';
 export * from './components/Catalog/CatalogActions';
 export * from './components/Catalog/CatalogHighlight';
 export * from './components/Catalog/CatalogInfoBlock';
+export * from './components/Catalog/CatalogVirtualizedGroups';
 export * from './components/Product/Product';
 export * from './components/Product/ProductPicker';
 export * from './components/StatusCode/StatusCode';
@@ -220,6 +220,8 @@ export * from './icons/FlowIcon/FlowIcon';
 export * from './icons/DraggableIcon/DraggableIcon';
 export * from './icons/WarningAltFilledIcon/WarningAltFilledIcon';
 export * from './icons/ErrorFilledIcon/ErrorFilledIcon';
+export * from './icons/CheckboxFilledIcon/CheckboxFilledIcon';
+export * from './icons/WarningAltFilled/WarningAltFilled';
 export * from './icons/SettingsCogIcon/SettingsCogIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';

package/lib/index.js

@@ -75,7 +75,6 @@ __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Footer/FooterColumn"), exports);
 __exportStar(require("./components/Footer/FooterCopyright"), exports);
 __exportStar(require("./components/Footer/FooterItem"), exports);
-__exportStar(require("./components/Footer/FooterLogo"), exports);
 /* Typography */
 __exportStar(require("./components/Typography/CompactTypography"), exports);
 __exportStar(require("./components/Typography/Emphasis"), exports);
@@ -150,6 +149,7 @@ __exportStar(require("./components/Catalog/CatalogCard"), exports);
 __exportStar(require("./components/Catalog/CatalogActions"), exports);
 __exportStar(require("./components/Catalog/CatalogHighlight"), exports);
 __exportStar(require("./components/Catalog/CatalogInfoBlock"), exports);
+__exportStar(require("./components/Catalog/CatalogVirtualizedGroups"), exports);
 /* Product */
 __exportStar(require("./components/Product/Product"), exports);
 __exportStar(require("./components/Product/ProductPicker"), exports);
@@ -272,6 +272,8 @@ __exportStar(require("./icons/FlowIcon/FlowIcon"), exports);
 __exportStar(require("./icons/DraggableIcon/DraggableIcon"), exports);
 __exportStar(require("./icons/WarningAltFilledIcon/WarningAltFilledIcon"), exports);
 __exportStar(require("./icons/ErrorFilledIcon/ErrorFilledIcon"), exports);
+__exportStar(require("./icons/CheckboxFilledIcon/CheckboxFilledIcon"), exports);
+__exportStar(require("./icons/WarningAltFilled/WarningAltFilled"), exports);
 __exportStar(require("./icons/SettingsCogIcon/SettingsCogIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.52.0-next.2",
+  "version": "0.52.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,7 @@
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "4.0.2",
-    "@redocly/config": "0.22.1"
+    "@redocly/config": "0.22.2"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Button/Button.tsx

@@ -29,6 +29,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   icon?: JSX.Element;
   iconPosition?: 'left' | 'right';
   title?: string;
+  tabIndex?: number;
   onClick?: (e?: any) => void;
 
   type?: 'button' | 'submit' | 'reset';
@@ -170,12 +171,14 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
 `;
 
 const ButtonComponent: React.FC<ButtonProps> = (props) => {
+  const tabIndex = 'tabIndex' in props ? props.tabIndex : props.to ? -1 : undefined;
+
   const button = (
     <StyledButton
       data-component-name="Button/Button"
       {...props}
       iconOnly={!props.children && props.icon !== null}
-      tabIndex={props.to ? -1 : undefined}
+      tabIndex={tabIndex}
     >
       {props.icon && props.iconPosition !== 'right' && props.icon}
       {props.children}

package/src/components/Catalog/Catalog.tsx

@@ -6,13 +6,12 @@ import type { CatalogConfig } from '@redocly/theme/config';
 import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks, useModalScrollLock } from '@redocly/theme/core/hooks';
 import { H2 } from '@redocly/theme/components/Typography/H2';
-import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCard';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
 import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { CatalogActions } from '@redocly/theme/components/Catalog/CatalogActions';
 import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
-import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { CatalogVirtualizedGroups } from '@redocly/theme/components/Catalog/CatalogVirtualizedGroups';
 
 export type CatalogProps = {
   pageProps: {
@@ -73,40 +72,14 @@ export default function Catalog(props: CatalogProps): JSX.Element {
               </CatalogDescription>
             ) : null}
           </CatalogPageDescriptionWrapper>
-          {groups.map((group) => (
-            <React.Fragment key={group.title}>
-              <CatalogSeparator data-testid="catalog-separator">
-                <CatalogSeparatorLabel>{group.title}</CatalogSeparatorLabel>
-                <CounterTag borderless>{group.items.length}</CounterTag>
-              </CatalogSeparator>
-              <CatalogCards>
-                {group.items.map((item) => (
-                  <CatalogCard item={item} key={item.link} />
-                ))}
-              </CatalogCards>
-            </React.Fragment>
-          ))}
+
+          <CatalogVirtualizedGroups groups={groups} filters={filters} filterTerm={filterTerm} />
         </CatalogPageContent>
       </CatalogPageWrapper>
     </HighlightContext.Provider>
   );
 }
 
-const CatalogSeparator = styled.div`
-  display: flex;
-  align-items: center;
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
-  border-top: 1px solid var(--catalog-separator-border-color);
-  margin: var(--catalog-separator-margin);
-  padding: var(--catalog-separator-padding);
-`;
-
-const CatalogSeparatorLabel = styled.div`
-  margin: var(--catalog-separator-label-margin);
-`;
-
 export const CatalogPageContent = styled.main`
   flex: 1;
   width: 90%;
@@ -118,13 +91,6 @@ export const CatalogPageContent = styled.main`
   }
 `;
 
-const CatalogCards = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
-  gap: 32px;
-  margin: var(--catalog-cards-group-margin);
-`;
-
 export const CatalogTitle = styled(H2)`
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);

package/src/components/Catalog/CatalogCard.tsx

@@ -119,6 +119,7 @@ const CardDescription = styled.div`
   font-size: var(--catalog-card-description-font-size);
   font-weight: var(--catalog-card-description-font-weight);
   line-height: var(--catalog-card-description-line-height);
+  height: var(--catalog-card-description-height);
 `;
 
 const CardContent = styled.div`

package/src/components/Catalog/CatalogVirtualizedGroups.tsx

@@ -0,0 +1,236 @@
+import React, { useMemo, useEffect, useState } from 'react';
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
+import styled from 'styled-components';
+
+import { CatalogItem, ResolvedFilter } from '@redocly/theme/core/types';
+import { useElementSize } from '@redocly/theme/core/hooks';
+import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCard';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { SpinnerLoader } from '@redocly/theme/components/Loaders/SpinnerLoader';
+
+const GAP_SIZE = 32;
+const ESTIMATED_HEADER_HEIGHT = 43;
+const ESTIMATED_CARD_HEIGHT = 194 + GAP_SIZE;
+const CARD_MIN_WIDTH_VAR = '--catalog-card-min-width';
+
+export type Group = {
+  title: string;
+  items: CatalogItem[];
+};
+
+export type VirtualRowData =
+  | { type: 'header'; groupTitle: string; groupCount: number; key: string }
+  | { type: 'cardRow'; groupTitle: string; items: CatalogItem[]; key: string };
+
+export type CatalogVirtualizedGroupsProps = {
+  groups: Group[];
+  filters: (ResolvedFilter & { isFilterUsed?: boolean })[];
+  filterTerm: string;
+};
+
+export function CatalogVirtualizedGroups({
+  groups,
+  filters,
+  filterTerm,
+}: CatalogVirtualizedGroupsProps) {
+  const [isClient, setIsClient] = useState(false);
+  const [size, parentRef] = useElementSize<HTMLDivElement>({ delay: 50, detectSizes: 'width' });
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    if (!size.width) {
+      return;
+    }
+
+    virtualizer.measure();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, filterTerm, size.width]);
+
+  const columnCount = useMemo(() => {
+    if (!size.width) return 4;
+    const cardMinWidth = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue(CARD_MIN_WIDTH_VAR),
+      10,
+    );
+
+    return Math.max(1, Math.floor((size.width + GAP_SIZE) / (cardMinWidth + GAP_SIZE)));
+  }, [size.width]);
+
+  const flatRows: VirtualRowData[] = useMemo(() => {
+    if (!isClient) {
+      return groups.flatMap((group) => [
+        {
+          type: 'header',
+          groupTitle: group.title,
+          groupCount: group.items.length,
+          key: `header-${group.title}`,
+        },
+        {
+          type: 'cardRow',
+          groupTitle: group.title,
+          items: group.items,
+          key: `${group.title}-cards`,
+        },
+      ]);
+    }
+
+    const rows: VirtualRowData[] = [];
+    groups.forEach((group) => {
+      rows.push({
+        type: 'header',
+        groupTitle: group.title,
+        groupCount: group.items.length,
+        key: `header-${group.title}`,
+      });
+      const numRows = Math.ceil(group.items.length / columnCount);
+      for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
+        const startIndex = rowIndex * columnCount;
+        const rowItems = group.items.slice(startIndex, startIndex + columnCount);
+        rows.push({
+          type: 'cardRow',
+          groupTitle: group.title,
+          items: rowItems,
+          key: `${group.title}-row-${rowIndex}`,
+        });
+      }
+    });
+    return rows;
+  }, [groups, columnCount, isClient]);
+
+  const virtualizer = useWindowVirtualizer({
+    count: flatRows.length,
+    estimateSize: (index: number) => {
+      const row = flatRows[index];
+      if (row.type === 'header') return ESTIMATED_HEADER_HEIGHT;
+      return ESTIMATED_CARD_HEIGHT;
+    },
+    overscan: 5,
+  });
+
+  if (!isClient) {
+    return (
+      <div ref={parentRef} data-component-name="Catalog/CatalogVirtualizedGroups">
+        {flatRows.slice(0, 15).map((rowData) => {
+          if (rowData.type === 'header') {
+            return (
+              <SSRHeaderRow key={rowData.key}>
+                <CatalogSeparatorLabel>{rowData.groupTitle}</CatalogSeparatorLabel>
+                <CounterTag borderless>{rowData.groupCount}</CounterTag>
+              </SSRHeaderRow>
+            );
+          }
+
+          return (
+            <SSRRow key={rowData.key}>
+              {rowData.items.map((item) => (
+                <CardWrapper key={item.link}>
+                  <CatalogCard item={item} />
+                </CardWrapper>
+              ))}
+            </SSRRow>
+          );
+        })}
+        <LoadingWrapper>
+          <SpinnerLoader color="var(--catalog-description-text-color)" size="20px" />
+        </LoadingWrapper>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={parentRef} data-component-name="Catalog/CatalogVirtualizedGroups">
+      <div
+        style={{
+          position: 'relative',
+          height: `${virtualizer.getTotalSize()}px`,
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualRow) => {
+          const rowData = flatRows[virtualRow.index];
+          if (rowData.type === 'header') {
+            return (
+              <HeaderRow
+                key={rowData.key}
+                ref={virtualizer.measureElement}
+                data-index={virtualRow.index}
+                style={{ transform: `translateY(${virtualRow.start}px)` }}
+              >
+                <CatalogSeparatorLabel>{rowData.groupTitle}</CatalogSeparatorLabel>
+                <CounterTag borderless>{rowData.groupCount}</CounterTag>
+              </HeaderRow>
+            );
+          }
+
+          return (
+            <GridRow
+              key={rowData.key}
+              ref={virtualizer.measureElement}
+              data-index={virtualRow.index}
+              style={{ transform: `translateY(${virtualRow.start}px)` }}
+            >
+              {rowData.items.map((item) => (
+                <CatalogCard key={item.link} item={item} />
+              ))}
+            </GridRow>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const SSRHeaderRow = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--catalog-separator-padding);
+  border-top: 1px solid var(--catalog-separator-border-color);
+  padding-bottom: calc(4px * 4);
+  color: var(--catalog-separator-color);
+  font-size: var(--catalog-separator-font-size);
+  font-weight: var(--catalog-separator-font-weight);
+`;
+
+const SSRRow = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--catalog-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-cards-group-gap, 32px);
+`;
+
+const HeaderRow = styled(SSRHeaderRow)`
+  position: absolute;
+  left: 0;
+  will-change: transform;
+`;
+
+const GridRow = styled.div`
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-min-width), 1fr));
+  gap: var(--catalog-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-cards-group-gap, 32px);
+  will-change: transform;
+`;
+
+const CardWrapper = styled.div`
+  flex: 1 0 var(--catalog-card-min-width);
+  max-width: 100%;
+  min-width: var(--catalog-card-min-width);
+`;
+
+const CatalogSeparatorLabel = styled.div`
+  margin: var(--catalog-separator-label-margin);
+`;
+
+const LoadingWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

package/src/components/Catalog/variables.ts

@@ -45,6 +45,7 @@ export const catalog = css`
     * @tokens Catalog card
     */
   --catalog-card-min-height: 194px;
+  --catalog-card-min-width: 260px;
   --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
@@ -58,6 +59,7 @@ export const catalog = css`
   --catalog-card-border-color-hover: var(--border-color-primary);
   --catalog-card-border-radius: var(--border-radius-xxl);
   --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
+  --catalog-cards-group-gap: var(--spacing-xl);
 
   /**
     * @tokens Catalog card title
@@ -77,6 +79,7 @@ export const catalog = css`
   --catalog-card-description-font-size: var(--font-size-base);
   --catalog-card-description-line-height: var(--line-height-base);
   --catalog-card-description-font-weight: var(--font-weight-regular);
+  --catalog-card-description-height: 62px;
 
   --catalog-card-content-gap: var(--spacing-xxs);
 

package/src/components/Dropdown/Dropdown.tsx

@@ -71,7 +71,6 @@ export function Dropdown({
     onClick: triggerEvent === 'click' ? handleToggle : undefined,
     icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
     ...(withArrow ? { iconPosition: 'right' } : {}),
-    tabIndex: 0,
     ...triggerChild.props,
     onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
   });

package/src/components/Link/Link.tsx

@@ -29,10 +29,11 @@ export function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element {
       hasActiveSubItem: _2,
       routeSlug: _3,
       external: _4,
+      innerRef,
       ...filteredProps
     } = props;
 
     // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
-    return <ReactLink ref={filteredProps.innerRef} {...filteredProps} />;
+    return <ReactLink ref={innerRef} {...filteredProps} />;
   }
 }

package/src/components/Menu/MenuItem.tsx

@@ -65,6 +65,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       onClick={handleOnClick}
       ref={labelRef}
       role={item.link ? 'none' : 'link'}
+      data-testid="menu-item-label"
     >
       {chevron}
       {item.icon ? <MenuItemIcon src={item.icon} /> : null}

package/src/components/Navbar/NavbarItem.tsx

@@ -70,7 +70,11 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           separatorLine={item.separatorLine}
           data-translation-key={item.labelTranslationKey}
         >
-          {translate(item.labelTranslationKey, item.label)}
+          <NavbarIcon url={item.icon} />
+          <NavbarLabel data-translation-key={item.labelTranslationKey}>
+            {translate(item.labelTranslationKey, item.label)}
+          </NavbarLabel>
+          {item.external ? <ExternalLinkIcon size="10px" /> : null}
         </DropdownMenuItem>
       );
     });

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -26,15 +26,24 @@ export function SearchFilterFieldTags({
       {facet.values.map((facetCount, index) => {
         const { value, count, isCounterVisible } = facetCount as SearchFacetCount;
         const active = selectedValues.includes(value);
+        const updateSelectedValues = () => {
+          const values = active
+            ? selectedValues.filter((item) => item !== value)
+            : [...selectedValues, value];
+          onChange(values);
+        };
         return (
           <FilterTagWrapper
             key={`${count}-${index}`}
+            tabIndex={0}
             color={value}
             onClick={() => {
-              const values = active
-                ? selectedValues.filter((item) => item !== value)
-                : [...selectedValues, value];
-              onChange(values);
+              updateSelectedValues();
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                updateSelectedValues();
+              }
             }}
             active={active}
             borderless

package/src/components/Search/SearchAiMessage.tsx

@@ -54,7 +54,8 @@ export function SearchAiMessage({
             {!isThinking && resources && resources.length > 0 && (
               <ResourcesWrapper data-testid="resources-wrapper">
                 <ResourcesTitle data-translation-key="search.ai.resourcesFound">
-                  {resources.length} {translate('search.ai.resourcesFound', 'resources found')}
+                  {translate('search.ai.resourcesFound.basedOn', 'Based on')} {resources.length}{' '}
+                  {translate('search.ai.resourcesFound.resources', 'resources')}
                 </ResourcesTitle>
                 <ResourceTagsWrapper>
                   {resources.map((resource, idx) => (
@@ -156,7 +157,6 @@ const ResourceTag = styled(Tag)`
     --tag-color: var(--search-ai-resource-tag-text-color);
     max-width: 100%;
     overflow: hidden;
-    white-space: nowrap;
     display: inline-block;
   }
   svg {
@@ -166,8 +166,8 @@ const ResourceTag = styled(Tag)`
   }
   > div {
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    word-break: break-word;
+    white-space: normal;
     max-width: 100%;
   }
 `;