fix(ui): upload action button styles (#12592)

### What

The upload action buttons had extra top & bottom `margin` extended on
them from the `.btn` class which caused the upload-actions container to
be larger than the thumbnail image.

Can be seen below:
![Screenshot 2025-05-28 at 1 04
57 PM](https://github.com/user-attachments/assets/d1a9ff8a-ff69-4c62-bbde-9deda6721ad3)

### Fix

To fix this issue, we've removed the bottom margin to allow the
thumbnail image control the height of the component.

#### Before
![Screenshot 2025-05-28 at 1 04
46 PM](https://github.com/user-attachments/assets/61f6dc9a-bf9d-411e-8d66-d50d27a328e9)

#### After
![Screenshot 2025-05-28 at 1 05
29 PM](https://github.com/user-attachments/assets/7687f3e8-e699-4a16-964d-20072e63d10f)

Author: PatrikKozak

packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss

@@ -33,16 +33,16 @@
     }
 
     &__main-detail {
-      padding: base(0.8) base(1.2);
+      padding: var(--base) calc(var(--base) * 1.2);
       width: auto;
       flex-grow: 1;
       min-width: 280px;
       max-width: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: center;
+      justify-content: space-between;
       align-self: stretch;
-      gap: base(0.2);
+      gap: calc(var(--base) * 0.2);
     }
 
     &__toggle-more-info {
@@ -61,14 +61,14 @@
 
     &__sizes {
       margin: 0;
-      padding: base(1.5) $baseline 0;
+      padding: calc(var(--base) * 1.5) $baseline 0;
       list-style: none;
       display: flex;
       flex-wrap: wrap;
 
       li {
         width: 50%;
-        padding: 0 base(0.5);
+        padding: 0 calc(var(--base) * 0.5);
         margin-bottom: $baseline;
       }
     }
@@ -79,7 +79,7 @@
 
     &__file-mutation {
       display: flex;
-      margin-top: base(0.25);
+      margin-top: calc(var(--base) * 0.25);
       gap: calc(var(--base) / 2);
     }
 
@@ -88,7 +88,7 @@
       background-color: var(--theme-elevation-150);
       border: none;
       border-radius: $style-radius-m;
-      padding: base(0.25) base(0.5);
+      padding: calc(var(--base) * 0.25) calc(var(--base) * 0.5);
 
       &:hover {
         background-color: var(--theme-elevation-100);
@@ -102,7 +102,7 @@
 
       &__sizes {
         display: block;
-        padding: $baseline $baseline base(0.5);
+        padding: $baseline $baseline calc(var(--base) * 0.5);
 
         li {
           padding: 0;

packages/ui/src/elements/Upload/index.scss

@@ -13,7 +13,7 @@
 
     .tooltip.error-message {
       z-index: 3;
-      bottom: calc(100% - #{base(0.5)});
+      bottom: calc(100% - #{calc(var(--base) * 0.5)});
     }
 
     &__file-selected {
@@ -60,13 +60,18 @@
       flex-wrap: wrap;
     }
 
+    &__previewSizes,
+    &__edit {
+      margin-top: calc(var(--base) * 1.2);
+    }
+
     &__previewDrawer {
       & h2 {
-        margin: 0 base(1) 0 0;
-        text-wrap: nowrap;
+        margin: 0 var(--base) 0 0;
+        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        max-width: calc(100% - base(2));
+        max-width: calc(100% - calc(var(--base) * 2));
       }
     }
 
@@ -78,7 +83,7 @@
     &__dropzoneContent {
       display: flex;
       flex-wrap: wrap;
-      gap: base(0.4);
+      gap: calc(var(--base) * 0.4);
       justify-content: space-between;
       width: 100%;
     }

packages/ui/src/elements/Upload/index.tsx

@@ -67,6 +67,7 @@ export const UploadActions = ({
             <Button
               buttonStyle="pill"
               className={`${baseClass}__previewSizes`}
+              margin={false}
               onClick={() => {
                 openModal(sizePreviewSlug)
               }}
@@ -79,6 +80,7 @@ export const UploadActions = ({
             <Button
               buttonStyle="pill"
               className={`${baseClass}__edit`}
+              margin={false}
               onClick={() => {
                 openModal(editDrawerSlug)
               }}
@@ -394,6 +396,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
                     setFileUrl(e.target.value)
                   }}
                   ref={urlInputRef}
+                  title={fileUrl}
                   type="text"
                   value={fileUrl}
                 />
@@ -435,6 +438,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
                 <input
                   className={`${baseClass}__filename`}
                   onChange={handleFileNameChange}
+                  title={filename || value.name}
                   type="text"
                   value={filename || value.name}
                 />