chore: move Main grid to its children

This way I can use full width background for some blocks.

2 files changed, 13 insertions, 6 deletions

diff --git a/src/components/Sharing/Sharing.module.scss b/src/components/Sharing/Sharing.module.scss
index 3186675..fe13125 100644
--- a/src/components/Sharing/Sharing.module.scss
+++ b/src/components/Sharing/Sharing.module.scss
@@ -2,11 +2,18 @@
 @use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
+.wrapper {
+  max-height: 100vh;
+  padding-bottom: var(--spacing-sm);
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+}
+
 .list {
   @extend %flex-list;
 
   gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-md);
 }
 
 .link {
@@ -55,9 +62,8 @@
     filter: drop-shadow(
       #{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%)
     );
-    width: 2ex;
-    height: 2ex;
-    margin-right: var(--spacing-2xs);
+    width: fun.convert-px(30);
+    height: fun.convert-px(30);
   }
 
   &--diaspora {
diff --git a/src/components/Sharing/Sharing.tsx b/src/components/Sharing/Sharing.tsx
index 4bcad5d..4df8e0d 100644
--- a/src/components/Sharing/Sharing.tsx
+++ b/src/components/Sharing/Sharing.tsx
@@ -90,9 +90,10 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
         <li key={id}>
           <a
             href={sharingUrl}
+            title={name}
             className={`${styles.link} ${styles[linkModifier]}`}
           >
-            {name}
+            <span className="screen-reader-text">{name}</span>
           </a>
         </li>
       );
@@ -100,7 +101,7 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
   };
 
   return (
-    <div>
+    <div className={styles.wrapper}>
       <h2>{t`Share`}</h2>
       <ul className={styles.list}>{getItems()}</ul>
     </div>