Limit the main content width

modules/layout/styles.module.css

@@ -1,26 +1,11 @@
 .container {
-  --app-bar-logo-width: 6rem;
-
-  /* TODO: Make logo width fixed so the alignment will match */
-  --page-padding-x: 8rem;
-  --page-padding-y: calc(var(--page-padding-x) / 2);
-  --search-results-percentage-width: calc(2 / 3);
-
   display: flex;
   flex-direction: column;
   min-height: 100%;
   overflow-x: auto;
   background: var(--white);
 }
 
-@media (--screen-until-large-desktop) {
-  .container {
-    --search-results-percentage-width: calc(1 / 2);
-    --page-padding-x: 1rem;
-    --page-padding-y: 1rem;
-  }
-}
-
 .main {
   position: relative;
   display: flex;

modules/search-layout/content.jsx

@@ -1,17 +1,12 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
-import { Card } from '@oacore/design'
 
 import styles from './styles.module.css'
 
-const Content = ({ children, className, tag = 'div', ...restProps }) => (
-  <Card
-    tag={tag}
-    className={classNames.use(styles.content, className)}
-    {...restProps}
-  >
+const Content = ({ children, className, ...restProps }) => (
+  <div className={classNames.use(styles.content, className)} {...restProps}>
     {children}
-  </Card>
+  </div>
 )
 
 export default Content

modules/search-layout/styles.module.css

@@ -1,7 +1,14 @@
 .container {
   display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: calc(var(--search-results-percentage-width) * 100%) auto;
+  grid-gap: var(--main-content-aside-gap);
+
+  /*
+    Cannot really use 66% and 33% because when page contains global scrollbar
+    the alignments gets wrong hence 100vw.
+   */
+  grid-template-columns:
+    calc((100vw - 2 * var(--page-padding-x)) * var(--main-content-ratio))
+    1fr;
   grid-auto-rows: auto;
 }