Fix action too long text (#1428)

voyagegroup · Sep 22, 2023 · 55ad8c3 · 55ad8c3
1 parent 06b8065
commit 55ad8c3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/few-chefs-melt.md b/.changeset/few-chefs-melt.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+fix action text too long
diff --git a/src/components/Calendar/internal/Actions/styled.ts b/src/components/Calendar/internal/Actions/styled.ts
@@ -1,12 +1,18 @@
 import styled from "styled-components";
-import { ScrollArea } from "../../../..";
+import ScrollArea from "../../../ScrollArea";
 
 export const Action = styled.button<{ clicked: boolean }>`
   cursor: pointer;
   background: none;
   border: none;
   display: block;
   margin: 0;
+  max-width: 130px;
+  width: 100%;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
   padding: ${({ theme }) => theme.spacing}px;
   color: ${({ clicked, theme }) =>
     clicked ? theme.palette.primary.main : theme.palette.black};