Remove styling on #pageContent (#1727)

* remove styling on #pageContent * add a spacious modifier to make content during the login flow wider * make sure l-wrap is always around * revert l-wrap--spacious * make the l-wrap part of mainWindow
dfinity · Jun 27, 2023 · 1e94fe8 · 1e94fe8
1 parent ccc320f
commit 1e94fe8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -12,7 +12,7 @@
     <script type="module" src="src/index.ts"></script>
   </head>
   <body>
-    <main id="pageContent" class="l-wrap" aria-live="polite"></main>
+    <main id="pageContent" aria-live="polite"></main>
     <div id="loaderContainer"></div>
 
     <!-- this is replaced by the backend before serving -->

diff --git a/src/frontend/src/components/mainWindow.ts b/src/frontend/src/components/mainWindow.ts
@@ -38,15 +38,17 @@ export const mainWindow = ({
     containerClasses.push(...additionalContainerClasses);
   }
   return html`
-    <div
-      id="${ifDefined(id !== null ? id : undefined)}"
-      class="${containerClasses.join(" ")}"
-    >
-      ${showLogo ? html`<div class="c-logo">${icLogo}</div>` : ""}
-      <div class="c-card c-card--background">
-        <div class="c-card c-card--highlight">${slot}</div>
+    <div class="l-wrap">
+      <div
+        id="${ifDefined(id !== null ? id : undefined)}"
+        class="${containerClasses.join(" ")}"
+      >
+        ${showLogo ? html`<div class="c-logo">${icLogo}</div>` : ""}
+        <div class="c-card c-card--background">
+          <div class="c-card c-card--highlight">${slot}</div>
+        </div>
       </div>
+      ${showFooter ? footer : ""}
     </div>
-    ${showFooter ? footer : ""}
   `;
 };
diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -605,7 +605,6 @@ a:hover,
   width: 100%;
 }
 
-#pageContent,
 .l-wrap {
   position: relative;
   display: flex;
@@ -616,7 +615,6 @@ a:hover,
 }
 
 @media (max-width: 512px) {
-  #pageContent,
   .l-wrap {
     padding: var(--rs-card-bezel);
   }
@@ -2404,7 +2402,6 @@ a.c-action-list__item {
 /** responsiveness */
 
 @media (max-width: 512px) {
-  #pageContent,
   .l-wrap {
     justify-content: flex-start;
     padding: 0;