Add max-width to content (#4170)

* Add max-width to content

* Add padding to content and change Query position

* Add max-width constants

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

packages/apps/src/Content/index.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Route } from '@polkadot/apps-routing/types';
+import type { ThemeProps } from '@polkadot/react-components/types';
 
 import React, { Suspense, useContext, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -88,14 +89,21 @@ function Content ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(Content)`
+export default React.memo(styled(Content)(({ theme }: ThemeProps) => `
   flex-grow: 1;
   overflow: hidden auto;
-  padding: 0 1.5rem 1rem;
+  padding: 0 0 1rem 0;
   position: relative;
   width: 100%;
 
   .connecting {
     padding: 3.5rem 0;
   }
-`);
+
+  & main > *:not(header):not(.ui--FilterOverlay) {
+    max-width: ${theme.contentMaxWidth};
+    margin: 0 auto;
+    width: 100%;
+    padding: 0 1.5rem;
+  }
+`));

packages/apps/src/themes.ts

@@ -11,6 +11,8 @@ const FONT = {
   fontWeightNormal: 400
 };
 
+const MAX_WIDTH = 1750;
+
 export const darkTheme: ThemeDef = {
   ...FONT,
   bgInput: '#38393f',
@@ -29,6 +31,8 @@ export const darkTheme: ThemeDef = {
   colorError: 'rgba(255, 0, 0, 0.85)',
   colorLabel: 'rgba(244, 242, 240, 0.45)',
   colorSummary: 'rgba(244, 242, 240, 0.75)',
+  contentHalfWidth: `${MAX_WIDTH / 2}px`,
+  contentMaxWidth: `${MAX_WIDTH}px`,
   theme: 'dark'
 };
 
@@ -50,5 +54,7 @@ export const lightTheme: ThemeDef = {
   colorError: 'rgba(139, 0, 0)',
   colorLabel: 'rgba(78, 78, 78, 0.66)',
   colorSummary: 'rgba(0, 0, 0, 0.6)',
+  contentHalfWidth: `${MAX_WIDTH / 2}px`,
+  contentMaxWidth: `${MAX_WIDTH}px`,
   theme: 'light'
 };

packages/page-explorer/src/Query.tsx

@@ -45,7 +45,7 @@ function Query ({ className = '', value: propsValue }: Props): React.ReactElemen
   );
 
   return (
-    <FilterOverlay className={className}>
+    <FilterOverlay className={`ui--FilterOverlay ${className}`}>
       <Input
         className='explorer--query'
         defaultValue={propsValue}

packages/react-components/src/FilterOverlay.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import media from './media';
+import { ThemeProps } from './types';
 
 interface Props {
   children: React.ReactNode;
@@ -25,12 +26,12 @@ export default React.memo(styled(FilterOverlay)`
   .ui--Labelled label {
     display: none;
   }
-
+  right: calc(50% - ${({ theme }: ThemeProps) => theme.contentHalfWidth} + 1.5rem);
+  
   ${media.DESKTOP`
     display: flex;
     justify-content: flex-end;
     position: absolute;
-    right: 1.5rem;
     top: 0.525rem;
 
     > div {
@@ -44,5 +45,10 @@ export default React.memo(styled(FilterOverlay)`
     .ui.selection.dropdown {
       white-space: nowrap;
     }
+    
   `}
+
+  @media (max-width: ${({ theme }: ThemeProps) => theme.contentMaxWidth}) {
+    right: 1.5rem;
+  }
 `);

packages/react-components/src/Tabs/index.tsx

@@ -44,16 +44,18 @@ function Tabs ({ basePath, className = '', hidden, isSequence, items }: Props):
 
   return (
     <div className={`ui--Tabs ${className}`}>
-      {filtered.map((tab, index) => (
-        <Tab
-          {...tab}
-          basePath={basePath}
-          index={index}
-          isSequence={isSequence}
-          key={tab.name}
-          num={filtered.length}
-        />
-      ))}
+      <div className='tabs-container'>
+        {filtered.map((tab, index) => (
+          <Tab
+            {...tab}
+            basePath={basePath}
+            index={index}
+            isSequence={isSequence}
+            key={tab.name}
+            num={filtered.length}
+          />
+        ))}
+      </div>
     </div>
   );
 }
@@ -62,11 +64,17 @@ export default React.memo(styled(Tabs)(({ theme }: ThemeProps) => `
   align-items: flex-end;
   background: ${theme.bgTabs};
   border-bottom: 1px solid ${theme.borderTabs};
-  display: flex;
-  margin: 0 -1.5rem;
-  padding: 1.5rem 1.5rem 0;
+
   text-align: left;
   z-index: 1;
+  
+  & .tabs-container {
+    max-width: ${theme.contentMaxWidth};
+    margin: 0 auto;
+    width: 100%;
+    display: flex;
+    padding: 1.5rem 1.5rem 0;
+  }
 
   &::-webkit-scrollbar {
     display: none;

packages/react-components/src/types.ts

@@ -142,6 +142,8 @@ export interface ThemeDef {
   colorError: string;
   colorLabel: string;
   colorSummary: string;
+  contentHalfWidth: string;
+  contentMaxWidth: string;
   fontSans: string;
   fontMono: string;
   fontWeightLight: number;