Update website details layout.

components/layout/GridRow.js

@@ -0,0 +1,18 @@
+import { Row, cloneChildren } from 'react-basics';
+import styles from './GridRow.module.css';
+import classNames from 'classnames';
+
+export default function GridRow(props) {
+  const { children, className, ...rowProps } = props;
+  return (
+    <Row {...rowProps} className={className}>
+      {breakpoint =>
+        cloneChildren(children, () => {
+          return {
+            className: classNames(styles.column, styles[breakpoint]),
+          };
+        })
+      }
+    </Row>
+  );
+}

components/layout/GridRow.module.css

@@ -0,0 +1,21 @@
+.column {
+  padding: 20px;
+  border-top: 1px solid var(--base200);
+  border-left: 1px solid var(--base200);
+}
+
+.column:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+
+.column:last-child {
+  padding-right: 0;
+}
+
+.column.xs,
+.column.sm,
+.column.md {
+  border-left: 0;
+  border-right: 0;
+}

components/layout/Header.js

@@ -1,6 +1,6 @@
+import { Row, Column } from 'react-basics';
 import { useRouter } from 'next/router';
 import { FormattedMessage } from 'react-intl';
-import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Icon from 'components/common/Icon';
 import LanguageButton from 'components/settings/LanguageButton';
@@ -25,31 +25,33 @@ export default function Header() {
   return (
     <>
       {allowUpdate && <UpdateNotice />}
-      <header className={classNames(styles.header, 'row')}>
-        <div className={styles.title}>
-          <Icon icon={<Logo />} size="large" className={styles.logo} />
-          <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
-        </div>
-        <HamburgerButton />
-        {user && !adminDisabled && (
-          <div className={styles.links}>
-            <Link href="/dashboard">
-              <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-            </Link>
-            <Link href="/realtime">
-              <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
-            </Link>
-            <Link href="/settings">
-              <FormattedMessage id="label.settings" defaultMessage="Settings" />
-            </Link>
-          </div>
-        )}
-        <div className={styles.buttons}>
-          <ThemeButton />
-          <LanguageButton menuAlign="right" />
-          <SettingsButton />
-          {user && !adminDisabled && <UserButton />}
-        </div>
+      <header className={styles.header}>
+        <Row>
+          <Column className={styles.title}>
+            <Icon icon={<Logo />} size="large" className={styles.logo} />
+            <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
+          </Column>
+          <HamburgerButton />
+          {user && !adminDisabled && (
+            <div className={styles.links}>
+              <Link href="/dashboard">
+                <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
+              </Link>
+              <Link href="/realtime">
+                <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
+              </Link>
+              <Link href="/settings">
+                <FormattedMessage id="label.settings" defaultMessage="Settings" />
+              </Link>
+            </div>
+          )}
+          <Column className={styles.buttons}>
+            <ThemeButton />
+            <LanguageButton menuAlign="right" />
+            <SettingsButton />
+            {user && !adminDisabled && <UserButton />}
+          </Column>
+        </Row>
       </header>
     </>
   );

components/layout/Header.module.css

@@ -10,7 +10,7 @@
   font-size: var(--font-size-lg);
   display: flex;
   align-items: center;
-  line-height: 1.4;
+  flex-direction: row;
 }
 
 .logo {
@@ -33,6 +33,7 @@
 .buttons {
   flex: 1;
   display: flex;
+  flex-direction: row;
   justify-content: flex-end;
   align-items: center;
 }