squash fixes

web/src/pages/activity-log/ActivityLogPage.tsx

@@ -9,7 +9,6 @@ import Skeleton from 'react-loading-skeleton';
 import { useI18nContext } from '../../i18n/i18n-react';
 import { FilterButton } from '../../shared/components/Layout/buttons/FilterButton/FilterButton';
 import { PageContainer } from '../../shared/components/Layout/PageContainer/PageContainer';
-import { PageLimiter } from '../../shared/components/Layout/PageLimiter/PageLimiter';
 import { FilterGroupsModal } from '../../shared/components/modals/FilterGroupsModal/FilterGroupsModal';
 import type { FilterGroupsModalFilter } from '../../shared/components/modals/FilterGroupsModal/types';
 import { Button } from '../../shared/defguard-ui/components/Layout/Button/Button';
@@ -34,10 +33,8 @@ import {
 
 export const ActivityLogPage = () => {
   return (
-    <PageContainer id="activity-log-page">
-      <PageLimiter>
-        <PageContent />
-      </PageLimiter>
+    <PageContainer id="activity-log-page" withDefaultPadding>
+      <PageContent />
     </PageContainer>
   );
 };

web/src/pages/devices/components/DevicesList/DevicesList.tsx

@@ -1,7 +1,6 @@
 import './style.scss';
 
 import { useMutation } from '@tanstack/react-query';
-import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
 import { shallow } from 'zustand/shallow';
 
@@ -22,6 +21,7 @@ import useApi from '../../../../shared/hooks/useApi';
 import { useClipboard } from '../../../../shared/hooks/useClipboard';
 import { useToaster } from '../../../../shared/hooks/useToaster';
 import type { StandaloneDevice } from '../../../../shared/types';
+import { dateToLocal } from '../../../../shared/utils/displayDate';
 import type { ListCellTag } from '../../../acl/AclIndexPage/components/shared/types';
 import { useDeleteStandaloneDeviceModal } from '../../hooks/useDeleteStandaloneDeviceModal';
 import { useDevicesPage } from '../../hooks/useDevicesPage';
@@ -96,9 +96,10 @@ const DeviceRow = (props: StandaloneDevice) => {
     [assigned_ips],
   );
   const formatDate = useMemo(() => {
-    const day = dayjs(added_date);
+    const day = dateToLocal(added_date);
     return day.format('DD.MM.YYYY | HH:mm');
   }, [added_date]);
+
   const { writeToClipboard } = useClipboard();
   return (
     <div className="device-row">

web/src/pages/network/NetworkEditForm/NetworkEditForm.tsx

@@ -206,7 +206,17 @@ export const NetworkEditForm = () => {
         address = data.address.join(',');
       }
 
-      return { ...defaultValues, ...omited, allowed_ips, address };
+      // we changed the default and this field is conditionally disabled
+      const peer_disconnect_threshold =
+        data.peer_disconnect_threshold < 120 ? 120 : data.peer_disconnect_threshold;
+
+      return {
+        ...defaultValues,
+        ...omited,
+        allowed_ips,
+        address,
+        peer_disconnect_threshold,
+      };
     },
     [defaultValues],
   );

web/src/pages/settings/components/GlobalSettings/types.ts

@@ -8,7 +8,7 @@ export const globalSettingsSchema = (LL: TranslationFunctions) =>
     instance_name: z
       .string()
       .min(3, LL.form.error.minimumLength())
-      .max(12, LL.form.error.maximumLength()),
+      .max(64, LL.form.error.maximumLength()),
     openid_enabled: z.boolean(),
     wireguard_enabled: z.boolean(),
     worker_enabled: z.boolean(),

web/src/shared/components/Layout/PageContainer/PageContainer.tsx

@@ -1,22 +1,34 @@
 import './style.scss';
 
-import classNames from 'classnames';
-import { type ComponentPropsWithoutRef, forwardRef, useMemo } from 'react';
-
+import clsx from 'clsx';
+import { type ComponentProps, useEffect } from 'react';
 import { useNavigationStore } from '../../../../components/Navigation/hooks/useNavigationStore';
 
-export const PageContainer = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
-  ({ children, className, ...rest }, ref) => {
-    const isNavOpen = useNavigationStore((state) => state.isOpen);
-    const cn = useMemo(() => classNames('page-container', className), [className]);
-    const contentCn = useMemo(
-      () => classNames('page-content', { 'nav-open': isNavOpen }),
-      [isNavOpen],
-    );
-    return (
-      <div {...rest} className={cn} ref={ref}>
-        <div className={contentCn}>{children}</div>
+type Props = {
+  withDefaultPadding?: boolean;
+} & ComponentProps<'div'>;
+
+export const PageContainer = ({
+  children,
+  className,
+  ref,
+  withDefaultPadding = false,
+  ...rest
+}: Props) => {
+  const isNavOpen = useNavigationStore((state) => state.isOpen);
+  useEffect(() => {
+    console.log({ withDefaultPadding });
+  }, [withDefaultPadding]);
+  return (
+    <div {...rest} className={clsx('page-container', className)}>
+      <div
+        className={clsx('page-content', {
+          'nav-open': isNavOpen,
+          'default-padding': withDefaultPadding,
+        })}
+      >
+        {children}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};

web/src/shared/components/Layout/PageContainer/style.scss

@@ -1,27 +1,13 @@
 @use '@scssutils' as *;
 
 .page-container {
+  min-height: inherit;
+
   @include media-breakpoint-down(lg) {
     height: 100%;
     max-height: inherit;
     box-sizing: border-box;
     position: relative;
-
-    & > .page-content {
-      overflow-y: auto;
-      box-sizing: border-box;
-      margin-top: 6rem;
-      height: calc(100% - 6rem);
-      max-height: 100%;
-
-      // hide scroll
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      -ms-overflow-style: none;
-      scrollbar-width: none; /* Firefox */
-    }
   }
 
   @include media-breakpoint-up(lg) {
@@ -33,9 +19,6 @@
     & > .page-content {
       width: calc(100% - 87px);
       margin-left: 87px;
-      height: inherit;
-      max-height: inherit;
-      position: relative;
 
       &.nav-open {
         margin-left: 230px;
@@ -44,3 +27,12 @@
     }
   }
 }
+
+.page-container > .page-content.default-padding {
+  box-sizing: border-box;
+  padding: var(--spacing-m) var(--spacing-s) var(--spacing-m);
+
+  @include media-breakpoint-up(lg) {
+    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
+  }
+}

web/src/shared/components/Layout/PageLayout/PageLayout.tsx

@@ -8,11 +8,21 @@ import { PageContainer } from '../PageContainer/PageContainer';
 type Props = {
   id: string;
   className?: string;
+  withDefaultPadding?: boolean;
 } & PropsWithChildren;
 
-export const PageLayout = ({ id, className, children }: Props) => {
+export const PageLayout = ({
+  id,
+  className,
+  children,
+  withDefaultPadding = false,
+}: Props) => {
   return (
-    <PageContainer id={id} className={clsx('page-layout', 'standard', className)}>
+    <PageContainer
+      id={id}
+      className={clsx('page-layout', 'standard', className)}
+      withDefaultPadding={withDefaultPadding}
+    >
       {children}
     </PageContainer>
   );

web/src/shared/scss/base/_base.scss

@@ -99,17 +99,29 @@ html {
 body {
   font-size: 1.6rem;
   color: v.$gray-light;
-  font-family: Poppins, 'Roboto Condensed', Roboto, 'Open Sans', Helvetica, Arial;
+  font-family:
+    Poppins,
+    Roboto,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
   background: v.$bg-light;
   overflow-x: hidden;
   position: relative;
+  max-height: 100dvh;
 }
 
 #app,
 #root {
   position: relative;
   min-height: 100dvh;
-  max-height: 100dvh;
 }
 
 h1,

web/src/shared/utils/displayDate.ts

@@ -0,0 +1,3 @@
+import dayjs, { type Dayjs } from 'dayjs';
+
+export const dateToLocal = (value: string): Dayjs => dayjs.utc(value).local();