fixed tag sidebar sidebar appearance

src/containers/sidebars/TagSidebar/index.tsx

@@ -8,6 +8,7 @@ import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
 import { Tag } from '~/components/tags/Tag';
 import { useTagNodes } from '~/hooks/tag/useTagNodes';
 import { DialogComponentProps } from '~/types/modal';
+import { SidebarStack } from '~/components/sidebar/SidebarStack';
 
 interface TagSidebarProps extends DialogComponentProps {
   tag: string;
@@ -19,43 +20,45 @@ const TagSidebar: VFC<TagSidebarProps> = ({ tag, onRequestClose }) => {
 
   return (
     <SidebarWrapper onClose={onRequestClose}>
-      <div className={styles.wrap}>
-        <div className={styles.content}>
-          <div className={styles.head}>
-            <div className={styles.tag}>
-              <Tag tag={{ title }} size="big" />
+      <SidebarStack>
+        <div className={styles.wrap}>
+          <div className={styles.content}>
+            <div className={styles.head}>
+              <div className={styles.tag}>
+                <Tag tag={{ title }} size="big" />
+              </div>
+
+              {isLoading && (
+                <div className={styles.sync}>
+                  <LoaderCircle size={20} />
+                </div>
+              )}
+
+              <div className={styles.close}>
+                <button onClick={onRequestClose}>
+                  <Icon icon="close" size={32} />
+                </button>
+              </div>
             </div>
 
-            {isLoading && (
-              <div className={styles.sync}>
-                <LoaderCircle size={20} />
+            {!nodes.length && !isLoading ? (
+              <div className={styles.none}>
+                <Icon icon="sad" size={120} />
+                <div>
+                  У этого тэга нет постов
+                  <br />
+                  <br />
+                  Такие дела
+                </div>
               </div>
+            ) : (
+              <InfiniteScroll hasMore={hasMore} loadMore={loadMore} className={styles.list}>
+                <TagSidebarList nodes={nodes} />
+              </InfiniteScroll>
             )}
-
-            <div className={styles.close}>
-              <button onClick={onRequestClose}>
-                <Icon icon="close" size={32} />
-              </button>
-            </div>
           </div>
-
-          {!nodes.length && !isLoading ? (
-            <div className={styles.none}>
-              <Icon icon="sad" size={120} />
-              <div>
-                У этого тэга нет постов
-                <br />
-                <br />
-                Такие дела
-              </div>
-            </div>
-          ) : (
-            <InfiniteScroll hasMore={hasMore} loadMore={loadMore} className={styles.list}>
-              <TagSidebarList nodes={nodes} />
-            </InfiniteScroll>
-          )}
         </div>
-      </div>
+      </SidebarStack>
     </SidebarWrapper>
   );
 };

src/containers/sidebars/TagSidebar/styles.module.scss

@@ -2,6 +2,8 @@
 
 .wrap {
   @include sidebar_content(400px);
+  width: 100vw;
+  max-width: 400px;
 }
 
 .content {
@@ -17,11 +19,12 @@
 }
 
 .head {
+  @include row_shadow;
+
   display: flex;
   align-items: center;
   justify-content: center;
   padding: $gap;
-  box-shadow: transparentize(white, 0.95) 0 1px;
 }
 
 .tag {