From e250becc692bddeaece12b41a2d17309d87f0e4e Mon Sep 17 00:00:00 2001
From: David de Kloet <122978264+dskloetd@users.noreply.github.com>
Date: Tue, 23 Jul 2024 15:39:00 +0200
Subject: [PATCH] NNS1-3094: Remove extra padding from staking island (#5234)

# Motivation

The staking table is currently narrower than the tokens table which is
not intended.
Both are inside an element with `width: var(--island-width)` but the
staking table uses this style on a `main` element which gets additional
padding from a global style.

While testing this, I also noticed that when the window gets narrow, the
tokens table gets double padding. Once from the padding on the `main`
element and once from the subtraction on the `--island-max-width` style
[which is set
to](https://github.com/dfinity/gix-components/blob/4b072e97fda2c0866bd6a355661cfda5fe44ac18/src/lib/styles/global/variables.scss#L45)
`calc(100% - 6 * var(--padding))`. This doesn't seem to be intended
either.

# Changes

1. Remove `max-width` style on the `MainWrapper` component.
2. Rename `MainWrapper` to `IslandWidthMain` and move it from
`components/tokens` to `components/layout`.
3. Reuse the `IslandWidthMain` in the `Staking` component to guarantee
consistency.

# Tests

Manually at
https://qsgjb-riaaa-aaaaa-aaaga-cai.dskloet-ingress.devenv.dfinity.network/

# Todos

- [ ] Add entry to changelog (if necessary).
not yet
---
 .../IslandWidthMain.svelte}                   |  1 -
 frontend/src/lib/routes/Staking.svelte        | 33 +++++++++----------
 .../src/routes/(app)/(home)/+layout.svelte    |  6 ++--
 .../routes/(app)/(nns)/tokens/+layout.svelte  |  6 ++--
 .../(app)/(u)/(list)/accounts/+layout.svelte  |  6 ++--
 5 files changed, 24 insertions(+), 28 deletions(-)
 rename frontend/src/lib/components/{tokens/MainWrapper.svelte => layout/IslandWidthMain.svelte} (92%)

diff --git a/frontend/src/lib/components/tokens/MainWrapper.svelte b/frontend/src/lib/components/layout/IslandWidthMain.svelte
similarity index 92%
rename from frontend/src/lib/components/tokens/MainWrapper.svelte
rename to frontend/src/lib/components/layout/IslandWidthMain.svelte
index d2362802a69..c0a2972c751 100644
--- a/frontend/src/lib/components/tokens/MainWrapper.svelte
+++ b/frontend/src/lib/components/layout/IslandWidthMain.svelte
@@ -23,7 +23,6 @@
       overflow-x: hidden;
       @include media.min-width(large) {
         width: var(--island-width);
-        max-width: var(--island-max-width);
       }
     }
   }
diff --git a/frontend/src/lib/routes/Staking.svelte b/frontend/src/lib/routes/Staking.svelte
index 987e02b8dd8..692f4f11f2a 100644
--- a/frontend/src/lib/routes/Staking.svelte
+++ b/frontend/src/lib/routes/Staking.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import SignInGuard from "$lib/components/common/SignInGuard.svelte";
+  import IslandWidthMain from "$lib/components/layout/IslandWidthMain.svelte";
   import ProjectsTable from "$lib/components/staking/ProjectsTable.svelte";
   import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants";
   import { authSignedInStore } from "$lib/derived/auth.derived";
@@ -51,29 +52,25 @@
   });
 </script>
 
-<main data-tid="staking-component">
-  {#if showStakingBanner}
-    <PageBanner testId="staking-page-banner">
-      <IconNeuronsPage slot="image" />
-      <svelte:fragment slot="title">{$i18n.staking.title}</svelte:fragment>
-      <p class="description" slot="description">{$i18n.staking.text}</p>
-      <SignInGuard slot="actions" />
-    </PageBanner>
-  {/if}
+<IslandWidthMain testId="staking-component">
+  <div class="content">
+    {#if showStakingBanner}
+      <PageBanner testId="staking-page-banner">
+        <IconNeuronsPage slot="image" />
+        <svelte:fragment slot="title">{$i18n.staking.title}</svelte:fragment>
+        <p class="description" slot="description">{$i18n.staking.text}</p>
+        <SignInGuard slot="actions" />
+      </PageBanner>
+    {/if}
 
-  <ProjectsTable />
-</main>
+    <ProjectsTable />
+  </div>
+</IslandWidthMain>
 
 <style lang="scss">
-  @use "@dfinity/gix-components/dist/styles/mixins/media";
-
-  main {
+  .content {
     display: flex;
     flex-direction: column;
     gap: var(--padding-2x);
-
-    @include media.min-width(large) {
-      width: var(--island-width);
-    }
   }
 </style>
diff --git a/frontend/src/routes/(app)/(home)/+layout.svelte b/frontend/src/routes/(app)/(home)/+layout.svelte
index a375c78f227..9d80fa213ff 100644
--- a/frontend/src/routes/(app)/(home)/+layout.svelte
+++ b/frontend/src/routes/(app)/(home)/+layout.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
   import Content from "$lib/components/layout/Content.svelte";
+  import IslandWidthMain from "$lib/components/layout/IslandWidthMain.svelte";
   import Layout from "$lib/components/layout/Layout.svelte";
   import LayoutList from "$lib/components/layout/LayoutList.svelte";
-  import MainWrapper from "$lib/components/tokens/MainWrapper.svelte";
   import { i18n } from "$lib/stores/i18n";
 </script>
 
 <LayoutList title={$i18n.navigation.tokens}>
   <Layout>
     <Content>
-      <MainWrapper>
+      <IslandWidthMain>
         <slot />
-      </MainWrapper>
+      </IslandWidthMain>
     </Content>
   </Layout>
 </LayoutList>
diff --git a/frontend/src/routes/(app)/(nns)/tokens/+layout.svelte b/frontend/src/routes/(app)/(nns)/tokens/+layout.svelte
index a375c78f227..9d80fa213ff 100644
--- a/frontend/src/routes/(app)/(nns)/tokens/+layout.svelte
+++ b/frontend/src/routes/(app)/(nns)/tokens/+layout.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
   import Content from "$lib/components/layout/Content.svelte";
+  import IslandWidthMain from "$lib/components/layout/IslandWidthMain.svelte";
   import Layout from "$lib/components/layout/Layout.svelte";
   import LayoutList from "$lib/components/layout/LayoutList.svelte";
-  import MainWrapper from "$lib/components/tokens/MainWrapper.svelte";
   import { i18n } from "$lib/stores/i18n";
 </script>
 
 <LayoutList title={$i18n.navigation.tokens}>
   <Layout>
     <Content>
-      <MainWrapper>
+      <IslandWidthMain>
         <slot />
-      </MainWrapper>
+      </IslandWidthMain>
     </Content>
   </Layout>
 </LayoutList>
diff --git a/frontend/src/routes/(app)/(u)/(list)/accounts/+layout.svelte b/frontend/src/routes/(app)/(u)/(list)/accounts/+layout.svelte
index 45b9e89bf42..3833456c271 100644
--- a/frontend/src/routes/(app)/(u)/(list)/accounts/+layout.svelte
+++ b/frontend/src/routes/(app)/(u)/(list)/accounts/+layout.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import Content from "$lib/components/layout/Content.svelte";
+  import IslandWidthMain from "$lib/components/layout/IslandWidthMain.svelte";
   import Layout from "$lib/components/layout/Layout.svelte";
   import LayoutList from "$lib/components/layout/LayoutList.svelte";
-  import MainWrapper from "$lib/components/tokens/MainWrapper.svelte";
   import { AppPath } from "$lib/constants/routes.constants";
   import { accountsTitleStore } from "$lib/derived/accounts-title.derived";
 
@@ -13,9 +13,9 @@
 <LayoutList title={$accountsTitleStore}>
   <Layout>
     <Content {back}>
-      <MainWrapper>
+      <IslandWidthMain>
         <slot />
-      </MainWrapper>
+      </IslandWidthMain>
     </Content>
   </Layout>
 </LayoutList>