@griddo/ax 11.14.2 → 11.14.3

package/src/modules/ActivityLog/ItemLogUser/UserItem/EventItem/index.tsx

@@ -1,17 +1,19 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
-import { useModal } from "@ax/hooks";
-import { pageEditorActions } from "@ax/containers/PageEditor";
+import { RestoreModal } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
 import { navigationActions } from "@ax/containers/Navigation";
+import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import { IRootState } from "@ax/types";
-import { RestoreModal } from "@ax/components";
+import { useModal } from "@ax/hooks";
+import type { IRootState } from "@ax/types";
+
+import type { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
 
-import DetailModal from "./../../../DetailModal";
 import { eventKey } from "./../../../constants";
+import DetailModal from "./../../../DetailModal";
 import { getContentTypeSchemaVersion, getPageSchemaVersion } from "./../../../utils";
 
 import * as S from "./style";
@@ -114,6 +116,7 @@ const EventItem = (props: IEventItemProps) => {
 						type="square"
 						color={site ? undefined : "#C3F4FF"}
 						textColor="rgba(32, 34, 76, 0.6)"
+						maxChar={30}
 					/>
 				</S.Site>
 				<S.ContentType>

package/src/modules/ActivityLog/ItemLogUser/UserItem/index.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import { Avatar } from "@ax/components";
+import { useState } from "react";
+
+import { Avatar, TruncatedTooltip } from "@ax/components";
+
 import EventItem from "./EventItem";
 
 import * as S from "./style";
@@ -21,7 +23,11 @@ const UserItem = (props: IUserItemProps) => {
 				<S.AvatarWrapper>
 					<Avatar image={image} name={name || ""} size={24} />
 				</S.AvatarWrapper>
-				<S.Name>{name}</S.Name>
+				<S.Name>
+					<TruncatedTooltip content={name || ""} expanded top={-5}>
+						<S.Title>{name}</S.Title>
+					</TruncatedTooltip>
+				</S.Name>
 				{!isOpen && <S.CounterWrapper>{logActivity.length} events created</S.CounterWrapper>}
 				<S.ToggleWrapper>
 					<S.Toggle onClick={handleToggle} isOpen={isOpen}>

package/src/modules/ActivityLog/ItemLogUser/UserItem/style.tsx

@@ -15,9 +15,25 @@ const User = styled.div`
 `;
 
 const Name = styled.div`
+  position: relative;
   ${(p) => p.theme.textStyle.uiS};
   color: ${(p) => p.theme.colors.textHighEmphasis};
   width: 25%;
+  min-width: 0;
+  > * {
+    min-width: 0;
+  }
+`;
+
+const Title = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const AvatarWrapper = styled.div`
@@ -57,4 +73,4 @@ const Toggle = styled.button<{ isOpen: boolean }>`
   }
 `;
 
-export { Item, User, Name, AvatarWrapper, EventList, CounterWrapper, ToggleWrapper, Toggle };
+export { Item, User, Name, Title, AvatarWrapper, EventList, CounterWrapper, ToggleWrapper, Toggle };

package/src/modules/App/Routing/NavMenu/NavItem/style.tsx

@@ -180,6 +180,7 @@ const AvatarWithBorder = styled.div`
   border: 2px solid;
   border-color: ${(p) => p.theme.color.textHighEmphasisInverse};
   border-radius: 50%;
+  margin-right: ${(p) => p.theme.spacing.xs};
 `;
 
 export { Heading, Dropdown, Arrow, LinkName, Item, NavLink, Icon, AvatarWithBorder };

package/src/modules/App/Routing/index.tsx

@@ -93,7 +93,7 @@ const Routing = (props: IProps) => {
 			));
 
 	return (
-		<>
+		<S.Root>
 			{route && !route.hideNav && <NavMenu />}
 			<S.Main>
 				<ErrorGuard />
@@ -107,7 +107,7 @@ const Routing = (props: IProps) => {
 					</Route>
 				</Switch>
 			</S.Main>
-		</>
+		</S.Root>
 	);
 };
 

package/src/modules/App/Routing/style.tsx

@@ -1,5 +1,12 @@
 import styled from "styled-components";
 
-export const Main = styled.main`
+export const Root = styled.div`
+  display: flex;
   width: 100%;
+  height: 100%;
+`;
+
+export const Main = styled.main`
+  flex: 1;
+  overflow-x: hidden;
 `;

package/src/modules/Categories/CategoriesList/BulkHeader/TableHeader/style.tsx

@@ -28,6 +28,7 @@ const TransHeader = styled(Header)`
   flex: 0 0 115px;
   justify-content: center;
   position: relative;
+  padding: 0;
 `;
 
 const SelectHeader = styled(Header)`

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { connect } from "react-redux";
 
 import { structuredData } from "@ax/api";
-import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tag } from "@ax/components";
+import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tag, TruncatedTooltip } from "@ax/components";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { isReqOk } from "@ax/helpers";
 import { useModal, usePermission } from "@ax/hooks";
@@ -231,10 +231,14 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 								<Icon name="project" size="24" />
 							</S.FolderWrapper>
 						)}
-						<div>{content?.title || ""}</div>
+						<TruncatedTooltip content={content?.title || ""} expanded top={-5}>
+							<S.Title>{content?.title || ""}</S.Title>
+						</TruncatedTooltip>
 					</S.NameCell>
 					<S.CodeCell role="cell" clickable={allowedToEditTaxonomy}>
-						{isCategory(category) && category.content ? category.content.code : ""}
+						<TruncatedTooltip content={isCategory(category) && category.content ? category.content.code : ""} expanded top={-5}>
+							<S.Code>{isCategory(category) && category.content ? category.content.code : ""}</S.Code>
+						</TruncatedTooltip>
 					</S.CodeCell>
 					<S.SelectableCell role="cell">
 						<Tag

package/src/modules/Categories/CategoriesList/CategoryItem/style.tsx

@@ -1,8 +1,8 @@
-import styled from "styled-components";
-import { CSS, Transform } from "@dnd-kit/utilities";
-
-import { Cell, Row } from "@ax/components/TableList/TableItem/style";
 import { ActionMenu } from "@ax/components";
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+
+import { CSS, type Transform } from "@dnd-kit/utilities";
+import styled from "styled-components";
 
 const Wrapper = styled.div<{ identationWidth: number }>`
   padding-left: ${(p) => `${p.identationWidth}px`};
@@ -18,7 +18,6 @@ const CheckCell = styled(Cell)`
 `;
 
 const NameCell = styled(Cell)<{ clickable: boolean; isGroup: boolean }>`
-  ${(p) => p.theme.textStyle.uiL};
   padding-left: ${(p) => p.theme.spacing.xs};
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => (p.isGroup ? p.theme.color.interactive01 : p.theme.color.textHighEmphasis)};
@@ -27,6 +26,21 @@ const NameCell = styled(Cell)<{ clickable: boolean; isGroup: boolean }>`
   align-items: center;
   justify-content: flex-start;
   flex-grow: 1;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Title = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiL};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const ActionsCell = styled(Cell)`
@@ -49,6 +63,22 @@ const CodeCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   flex: 0 0 250px;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Code = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const StyledActionMenu = styled(ActionMenu)`
@@ -107,15 +137,18 @@ const FolderWrapper = styled.div`
   width: 24px;
   height: 24px;
   margin-right: ${(p) => p.theme.spacing.xs};
+  flex-shrink: 0;
 `;
 
 export {
 	Wrapper,
 	CheckCell,
 	NameCell,
+	Title,
 	ActionsCell,
 	TransCell,
 	CodeCell,
+	Code,
 	SelectableCell,
 	StyledActionMenu,
 	CategoryRow,

package/src/modules/Content/BulkHeader/TableHeader/style.tsx

@@ -76,7 +76,7 @@ const HeaderWrapper = styled.div`
 `;
 
 const ColumnHeader = styled(Header)`
-  flex: 0 0 150px;
+  flex: 0 0 215px;
   justify-content: center;
 `;