adjust margin of Tag.tsx and rename variable in TagList.tsx

packages/app/src/components/Sidebar/Tag.tsx

@@ -48,9 +48,9 @@ const Tag: FC = () => {
       <div className="px-3 text-center">
         <TagCloudBox tags={tagData} />
       </div>
-      <div className="d-flex justify-content-center">
+      <div className="d-flex justify-content-center my-5">
         <button
-          className="btn btn-primary rounded mt-3 mb-4 px-5"
+          className="btn btn-primary rounded px-5"
           type="button"
           onClick={() => { window.location.href = '/tags' }}
         >

packages/app/src/components/TagList.tsx

@@ -26,16 +26,17 @@ const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) =
   const { t } = useTranslation('');
 
   const generateTagList = useCallback((tagData) => {
-    return tagData.map((data:ITagCountHasId, index:number) => {
+    return tagData.map((tag:ITagCountHasId, index:number) => {
       const tagListClasses: string = index === 0 ? 'list-group-item d-flex' : 'list-group-item d-flex border-top-0';
+
       return (
         <a
-          key={data.name}
-          href={`/_search?q=tag:${encodeURIComponent(data.name)}`}
+          key={tag._id}
+          href={`/_search?q=tag:${encodeURIComponent(tag.name)}`}
           className={tagListClasses}
         >
-          <div className="text-truncate">{data.name}</div>
-          <div className="ml-4 my-auto py-1 px-2 list-tag-count badge badge-secondary text-white">{data.count}</div>
+          <div className="text-truncate">{tag.name}</div>
+          <div className="ml-4 my-auto py-1 px-2 list-tag-count badge badge-secondary text-white">{tag.count}</div>
         </a>
       );
     });