From 0803631708fc1aa85b90217dfc3cc7d0f772604b Mon Sep 17 00:00:00 2001
From: "haitao(lj)" <haitao@sifou.com>
Date: Tue, 11 Oct 2022 16:18:47 +0800
Subject: [PATCH] fix: #1000, optimize tag list layout

---
 ui/src/common/variable.scss                               | 1 +
 ui/src/components/FollowingTags/index.tsx                 | 7 ++-----
 ui/src/components/Questions/index.tsx                     | 8 +++++---
 ui/src/components/TagSelector/index.tsx                   | 7 +++----
 .../pages/Questions/Detail/components/Question/index.tsx  | 6 +++---
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/ui/src/common/variable.scss b/ui/src/common/variable.scss
index 99766954..5687c2e4 100644
--- a/ui/src/common/variable.scss
+++ b/ui/src/common/variable.scss
@@ -1,2 +1,3 @@
 $link-hover-decoration: none;
+$enable-negative-margins: true;
 $blue: #0033FF !default;
diff --git a/ui/src/components/FollowingTags/index.tsx b/ui/src/components/FollowingTags/index.tsx
index 99d1109d..993efaf7 100644
--- a/ui/src/components/FollowingTags/index.tsx
+++ b/ui/src/components/FollowingTags/index.tsx
@@ -68,16 +68,13 @@ const Index: FC = () => {
           {t('edit')}
         </Button>
       </Card.Header>
-      <Card.Body className="pb-2">
+      <Card.Body className="mx-n1">
         {followingTags?.length ? (
           <>
             {followingTags.map((item) => {
               const slugName = item?.slug_name;
               return (
-                <Tag
-                  key={slugName}
-                  className="me-2 mb-2"
-                  href={`/tags/${slugName}`}>
+                <Tag key={slugName} className="m-1" href={`/tags/${slugName}`}>
                   {slugName}
                 </Tag>
               );
diff --git a/ui/src/components/Questions/index.tsx b/ui/src/components/Questions/index.tsx
index 987727bc..6e7f8b49 100644
--- a/ui/src/components/Questions/index.tsx
+++ b/ui/src/components/Questions/index.tsx
@@ -122,7 +122,9 @@ const QuestionList: FC<Props> = ({ source }) => {
       <ListGroup variant="flush" className="border-top border-bottom-0">
         {listData?.list?.map((li) => {
           return (
-            <ListGroup.Item key={li.id} className="border-bottom py-3 px-0">
+            <ListGroup.Item
+              key={li.id}
+              className="border-bottom pt-3 pb-2 px-0">
               <h5 className="text-wrap text-break">
                 <NavLink to={`/questions/${li.id}`} className="link-dark">
                   {li.title}
@@ -153,13 +155,13 @@ const QuestionList: FC<Props> = ({ source }) => {
                   <em className="fst-normal mx-1">{li.view_count}</em>
                 </span>
               </div>
-              <div className="question-tags">
+              <div className="question-tags mx-n1">
                 {Array.isArray(li.tags)
                   ? li.tags.map((tag) => {
                       return (
                         <Tag
                           key={tag.slug_name}
-                          className="me-2 mt-2"
+                          className="m-1"
                           href={`/tags/${
                             tag.main_tag_slug_name || tag.slug_name
                           }`}>
diff --git a/ui/src/components/TagSelector/index.tsx b/ui/src/components/TagSelector/index.tsx
index 06ffdb6e..790b8242 100644
--- a/ui/src/components/TagSelector/index.tsx
+++ b/ui/src/components/TagSelector/index.tsx
@@ -177,19 +177,18 @@ const TagSelector: FC<IProps> = ({
       onFocus={onFocus}
       onBlur={onBlur}
       onKeyDown={handleKeyDown}>
-      <div className="d-flex flex-wrap">
+      <div className="d-flex flex-wrap mx-n1">
         {initialValue?.map((item, index) => {
           return (
             <Button
               key={item.slug_name}
               className={classNames(
-                'me-2 mb-2 text-nowrap d-flex align-items-center',
+                'm-1 text-nowrap d-flex align-items-center',
                 index === repeatIndex && 'warning',
               )}
               variant="outline-secondary"
               size="sm">
               {item.slug_name}
-
               <span className="ms-1" onMouseUp={() => handleRemove(item)}>
                 ×
               </span>
@@ -199,7 +198,7 @@ const TagSelector: FC<IProps> = ({
         {initialValue?.length < 5 || alwaysShowAddBtn ? (
           <Dropdown onSelect={handleSelect} onToggle={setVisibleMenu}>
             <Dropdown.Toggle
-              className={classNames(alwaysShowAddBtn ? 'mb-2' : null)}
+              className={classNames('m-1')}
               variant="outline-secondary"
               size="sm">
               <span className="me-1">+</span>
diff --git a/ui/src/pages/Questions/Detail/components/Question/index.tsx b/ui/src/pages/Questions/Detail/components/Question/index.tsx
index f75c1cd7..333c80d8 100644
--- a/ui/src/pages/Questions/Detail/components/Question/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Question/index.tsx
@@ -65,7 +65,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
             : ''}
         </Link>
       </h1>
-      <div className="d-flex align-items-center fs-14 mb-3 text-secondary">
+      <div className="d-flex align-items-center fs-14 mb-2 text-secondary">
         <FormatTime
           time={data.create_time}
           preFix={t('Asked')}
@@ -90,11 +90,11 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
           {followed ? 'Following' : 'Follow'}
         </Button>
       </div>
-      <div className="mb-3">
+      <div className="mb-2 mx-n1">
         {data?.tags?.map((item: any) => {
           return (
             <Tag
-              className="me-1"
+              className="m-1"
               href={`/tags/${item.main_tag_slug_name || item.slug_name}`}
               key={item.slug_name}>
               {item.slug_name}