explorer: fix layout design issues

dusk-network · Jun 25, 2024 · 0d0ca18 · 0d0ca18
1 parent 516fc2e
commit 0d0ca18
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/explorer/src/lib/components/table/Table.css b/explorer/src/lib/components/table/Table.css
@@ -20,6 +20,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
+  text-wrap: nowrap;
 }
 
 .table__data-cell {

diff --git a/explorer/src/routes/+page.svelte b/explorer/src/routes/+page.svelte
@@ -65,14 +65,14 @@
     .chain-info {
       display: flex;
       flex-wrap: wrap;
-      gap: 1.875rem;
+      gap: 1.25rem;
     }
   }
 
-  @media (min-width: 1024px) {
+  @media (min-width: 1780px) {
     .tables {
       flex-direction: row;
-      gap: 1.875rem;
+      gap: 1.25rem;
     }
 
     :global(.tables-layout) {

diff --git a/explorer/src/routes/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/__tests__/__snapshots__/page.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`home page > should render the home page, start polling for the latest chain info and stop the polling when the component is destroyed 1`] = `
 <section
-  class="chain-info svelte-m0gc0x"
+  class="chain-info svelte-1ayc05m"
 >
   <div
     class="statistics-panel"
@@ -1001,7 +1001,7 @@ exports[`home page > should render the home page, start polling for the latest c
 
 exports[`home page > should render the home page, start polling for the latest chain info and stop the polling when the component is destroyed 2`] = `
 <section
-  class="chain-info svelte-m0gc0x"
+  class="chain-info svelte-1ayc05m"
 >
   <div
     class="statistics-panel"

diff --git a/explorer/src/style/main.css b/explorer/src/style/main.css
@@ -43,6 +43,8 @@ html,
 body {
   width: 100%;
   height: 100%;
+  max-width: 1920px;
+  margin: 0 auto;
 }
 
 html {
@@ -62,6 +64,10 @@ svg {
   fill: currentColor;
 }
 
+.explorer-badge {
+  min-width: 100px;
+}
+
 .mobile-hidden {
   display: block;
 }
@@ -74,7 +80,9 @@ svg {
   body {
     padding: 0 1.25rem;
   }
+}
 
+@media (max-width: 1024px) {
   .mobile-hidden {
     display: none;
   }
@@ -83,7 +91,3 @@ svg {
     display: block;
   }
 }
-
-.explorer-badge {
-  min-width: 100px;
-}