Improve fileActions Buttons style on mobile view

- Move label to bottom instead of to the side
- Decrease font, sizes and spacings
- Make sure all fit in a single line even on smallest screen size

ui/component/fileActions/view.jsx

@@ -171,7 +171,7 @@ export default function FileActions(props: Props) {
       {(!isLivestreamClaim || !claimIsMine || isMobile) && (
         <Menu>
           <MenuButton
-            className="button--file-action"
+            className="button--file-action--menu"
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();

ui/scss/component/_button.scss

@@ -314,6 +314,10 @@
   }
 }
 
+.button--file-action--menu {
+  @extend .button--file-action;
+}
+
 .button--fire {
   color: var(--color-fire);
   position: relative;

ui/scss/component/_card.scss

@@ -312,7 +312,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-l);
+    padding: 0 !important;
   }
 }
 

ui/scss/component/_media.scss

@@ -118,11 +118,35 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    padding-top: var(--spacing-s);
+    justify-content: space-around !important;
+    margin: 0;
+    padding: 0;
 
-    > * {
+    div {
-      margin-right: var(--spacing-s);
+      margin: 0 !important;
-      margin-bottom: var(--spacing-s);
+    }
+
+    .button--file-action {
+      margin: 0 !important;
+      padding: var(--spacing-xxs);
+      width: 3.1rem;
+      height: 3.1rem;
+
+      .button__content {
+        flex-direction: column;
+        justify-content: space-between;
+
+        .button__label {
+          margin: 0;
+          margin-top: var(--spacing-xxs);
+          font-size: var(--font-xxsmall);
+        }
+      }
+    }
+
+    .button--file-action--menu {
+      width: unset;
+      height: 2rem;
     }
   }
 }