fix: search panel tag line break behavior

zxch3n · Sep 26, 2020 · 8f6e3d0 · 8f6e3d0
1 parent 90b6f24
commit 8f6e3d0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pomodoro-logger",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Pomodoro Logger -- When a time logger meets Pomodoro and Kanban board",
   "main": "./dist/main.js",
   "scripts": {

diff --git a/src/components/common/Search/SearchPanel.tsx b/src/components/common/Search/SearchPanel.tsx
@@ -18,8 +18,12 @@ const Title = styled.p`
     color: #777;
     font-size: 0.8rem;
 `;
+
 const Group = styled.div`
     padding: 4px;
+    max-width: 280px;
+    word-break: normal;
+    line-height: 1.8;
 `;
 
 export const SearchPanel = ({
@@ -33,9 +37,12 @@ export const SearchPanel = ({
             <Title>#TAGS</Title>
             <Group>
                 {tags.map((x) => (
-                    <span className="pl-tag" key={x} onClick={setSearch(x)}>
-                        {x}
-                    </span>
+                    <>
+                        <span className="pl-tag" key={x} onClick={setSearch(x)}>
+                            {x}
+                        </span>
+                        <span/>
+                    </>
                 ))}
             </Group>
             {/* <Title>HISTORY</Title>