fix: SupportedDeviceTable SeeAll button position (#581)

* fix: SupportedDeviceTable SeeAll button position * update to use sass math
seamapi · Jan 9, 2024 · bfea0b3 · bfea0b3
1 parent afc2377
commit bfea0b3
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/src/styles/_supported-device-table.scss b/src/styles/_supported-device-table.scss
@@ -1,6 +1,8 @@
 @use './colors';
 
+$row-height: 64px;
 $row-padding: 8px;
+$see-all-button-height: 30px;
 
 @mixin all {
   .seam-supported-device-table-content-wrap {
@@ -160,7 +162,7 @@ $row-padding: 8px;
       cursor: pointer;
       background: colors.$white;
       display: flex;
-      height: 30px;
+      height: $see-all-button-height;
       padding: 5px 24px 4px 16px;
       align-items: center;
       gap: 2px;
@@ -173,6 +175,7 @@ $row-padding: 8px;
         0 1px 1px 0 rgb(16 27 37 / 10%),
         0 1px 8px 0 rgb(46 69 82 / 12%);
       position: absolute;
+      bottom: -($row-height - $see-all-button-height - $row-padding) / 2;
       left: 50%;
       transform: translate(-50%, -47px);
       z-index: 3;
@@ -189,7 +192,7 @@ $row-padding: 8px;
         #fff 86.98%
       );
       position: absolute;
-      height: 64px;
+      height: $row-height;
       width: 100%;
       bottom: 0;
       z-index: 2;
@@ -267,7 +270,7 @@ $row-padding: 8px;
     border-collapse: collapse;
 
     .seam-row {
-      height: 64px;
+      height: $row-height;
       border-bottom: 1px solid colors.$bg-b;
       display: flex;