From 56998d07a1e62bfd1fd5f09cb8dc2015338d7d26 Mon Sep 17 00:00:00 2001
From: qishaoxuan <qishaoxuan777@gmail.com>
Date: Fri, 29 Jul 2022 10:21:18 +0800
Subject: [PATCH] fix: input placeholder display error when the width is not
 enough

---
 libs/components/ui/src/input/Input.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/components/ui/src/input/Input.tsx b/libs/components/ui/src/input/Input.tsx
index b0628300c8..aeb5c97404 100644
--- a/libs/components/ui/src/input/Input.tsx
+++ b/libs/components/ui/src/input/Input.tsx
@@ -63,6 +63,10 @@ const StyledInputElement = styled('input')(({ theme }) => ({
     lineHeight: '1.5',
     color: `${theme.affine.palette.secondaryText}`,
     flexGrow: 1,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
     '&::placeholder': {
         color: `${theme.affine.palette.borderColor}`,
     },