@public-ui/sample-react 3.0.3 → 3.0.4-ed0f3af88ca201e0c6c949626c9aeee66f80f44e.0

package/src/components/spin/label.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { KolSpin } from '@public-ui/react';
+import { KolSpin } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/split-button/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolSplitButton, KolToolbar } from '@public-ui/react';
+import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
 

package/src/components/split-button/with-context.tsx

@@ -2,13 +2,13 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import * as React from 'react';
 
-import { KolButton, KolInputText, KolSplitButton } from '@public-ui/react';
+import { KolButton, KolInputText, KolSplitButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
 export const SplitButtonWithContext: FC = () => {
-	const splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>();
+	const splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>(null);
 
 	const handleCloseClick = () => {
 		splitButtonRef.current?.closePopup();

package/src/components/table/column-alignment.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTableStateful } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/table/complex-headers.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateful } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (

package/src/components/table/horizontal-scrollbar.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/table/interactive-child-elements.tsx

@@ -1,5 +1,5 @@
 import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
-import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { getRoot } from '../../shares/react-roots';

package/src/components/table/multi-sort.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';

package/src/components/table/pagination-position.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTableStateful } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';

package/src/components/table/predefined-settings.tsx

@@ -1,5 +1,5 @@
 import { SampleDescription } from '../SampleDescription';
-import { KolTableStateful } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 

package/src/components/table/render-cell.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';

package/src/components/table/sort-data.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTableStateful } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';

package/src/components/table/stateful-with-selection.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';

package/src/components/table/stateful-with-single-selection.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';

package/src/components/table/stateless-with-selection.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';

package/src/components/table/stateless-with-single-selection.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';

package/src/components/table/stateless.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateless } from '@public-ui/react';
+import { KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];

package/src/components/table/with-footer.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateful } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (

package/src/components/table/with-pagination.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTableStateful } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react-v19';
 
 import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';

package/src/components/tabs/align.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTabs } from '@public-ui/react';
+import { KolHeading, KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import type { AlignPropType } from '@public-ui/components';
 

package/src/components/tabs/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTabs } from '@public-ui/react';
+import { KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/tabs/behavior.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTabs } from '@public-ui/react';
+import { KolHeading, KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/tabs/create-button.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { FC } from 'react';
-import { KolTabs } from '@public-ui/react';
+import { KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const CreateButton: FC = () => {

package/src/components/tabs/icons-only.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTabs } from '@public-ui/react';
+import { KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/textarea/adjust-height.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolForm, KolTextarea } from '@public-ui/react';
+import { KolForm, KolTextarea } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore

package/src/components/textarea/partials/cases.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { KolTextarea } from '@public-ui/react';
+import { KolTextarea } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';

package/src/components/textarea/resize.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolForm, KolTextarea } from '@public-ui/react';
+import { KolForm, KolTextarea } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/textarea/rows.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolForm, KolTextarea } from '@public-ui/react';
+import { KolForm, KolTextarea } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/textarea/with-counter.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTextarea } from '@public-ui/react';
+import { KolTextarea } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TextareaWithCounter: FC = () => (

package/src/components/toast/basic.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { ToasterService } from '@public-ui/components';
-import { KolButton } from '@public-ui/react';
+import { KolButton } from '@public-ui/react-v19';
 import type { AlertTypePropType, AlertVariantPropType } from '@public-ui/components';
 
 import { getRoot } from '../../shares/react-roots';

package/src/components/toolbar/basic.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolHeading, KolToolbar } from '@public-ui/react';
+import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {

package/src/components/toolbar/disabled.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolToolbar } from '@public-ui/react';
+import { KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarDisabled: FC = () => {

package/src/components/tree/basic.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useContext, useState } from 'react';
-import { KolButton, KolTree, KolTreeItem } from '@public-ui/react';
+import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import { getRandomEmoji } from '../../shares/randomEmoji';
 import { useParams } from 'react-router';
 import { HideMenusContext } from '../../shares/HideMenusContext';

package/src/components/version/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolVersion } from '@public-ui/react';
+import { KolVersion } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/version/context.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolVersion } from '@public-ui/react';
+import { KolVersion } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/main.ts

@@ -1,5 +1,11 @@
 import 'uno.css'; // https://github.com/antfu/unocss
 // App style
 import './style.scss';
+
+/* Optional theme CSS (e.g. font-face declarations) */
+if (process.env.THEME_CSS) {
+	import(/* @vite-ignore */ process.env.THEME_CSS);
+}
+
 // App
 import './react.main';

package/src/react.main.tsx

@@ -1,4 +1,4 @@
-import { setTagNameTransformer } from '@public-ui/react';
+import { setTagNameTransformer } from '@public-ui/react-v19';
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -2,7 +2,7 @@ import { Formik } from 'formik';
 import React, { useEffect, useState, useRef } from 'react';
 import * as Yup from 'yup';
 
-import { KolLink, KolTabs } from '@public-ui/react';
+import { KolLink, KolTabs } from '@public-ui/react-v19';
 
 import { checkAppointmentAvailability } from './appointmentService';
 import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from 'formik';
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 
-import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
+import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react-v19';
 
 import { fetchAvailableTimes } from './appointmentService';
 

package/src/scenarios/appointment-form/DistrictForm.tsx

@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from 'formik';
 import React, { useState, useRef } from 'react';
 
-import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
+import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react-v19';
 
 import type { FieldProps } from 'formik';
 import type { FormValues } from './AppointmentForm';

package/src/scenarios/appointment-form/PersonalInformationForm.tsx

@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from 'formik';
 import React, { useState, useEffect, useRef } from 'react';
 
-import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react';
+import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react-v19';
 
 import type { FieldProps } from 'formik';
 import type { FormValues } from './AppointmentForm';

package/src/scenarios/appointment-form/Summary.tsx

@@ -1,7 +1,7 @@
 import { useFormikContext } from 'formik';
 import React from 'react';
 
-import { KolHeading } from '@public-ui/react';
+import { KolHeading } from '@public-ui/react-v19';
 
 import type { FormValues } from './AppointmentForm';
 

package/src/scenarios/appointment-form/formUtils.ts

@@ -7,6 +7,6 @@ export function createErrorList(formikErrors: Record<string, string>): ErrorList
 	}));
 }
 
-export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement>) {
+export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement | null>) {
 	formikRef.current?.focusErrorList().catch(console.warn);
 }

package/src/scenarios/change-tabindex.tsx

@@ -21,7 +21,7 @@ import {
 	KolSingleSelect,
 	KolSplitButton,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import React from 'react';
 import type { FC } from 'react';
 import { ERROR_MSG, HINT_MSG } from '../shares/constants';

package/src/scenarios/custom-tooltip-width.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolButton } from '@public-ui/react';
+import { KolButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../components/SampleDescription';
 import { useToasterService } from '../hooks/useToasterService';
 

package/src/scenarios/disabled-interactive-elements.tsx

@@ -18,7 +18,7 @@ import {
 	KolLinkButton,
 	KolSelect,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';

package/src/scenarios/focus-elements.tsx

@@ -21,7 +21,7 @@ import {
 	KolSelect,
 	KolSingleSelect,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import type { FC, ForwardRefRenderFunction } from 'react';
 import { useMemo } from 'react';
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { KolTableStateful, KolTabs, KolNav } from '@public-ui/react';
+import { KolTableStateful, KolTabs, KolNav } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components';
 import { SampleDescription } from '../../components/SampleDescription';
 import { LINKS } from '../../components/nav/links';

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -1,13 +1,13 @@
 @use '../../@shared/mixins' as *;
 
 .mainlayout {
-	min-height: calc(100vh - rem(32));
-	width: 100%;
 	display: grid;
+	width: 100%;
+	min-height: calc(100vh - rem(32));
 	column-gap: rem(16);
+	grid-template-areas: 'nav content';
 	grid-template-columns: rem(400) calc(100% - rem(460));
 	grid-template-rows: 1fr;
-	grid-template-areas: 'nav content';
 
 	&>.nav-area {
 		grid-area: nav;

package/src/scenarios/input-group-with-error.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { FC } from 'react';
-import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react';
+import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react-v19';
 import { SampleDescription } from '../components/SampleDescription';
 import type { SelectOption } from '@public-ui/components';
 

package/src/scenarios/inputs-get-value.tsx

@@ -19,7 +19,7 @@ import {
 	KolSingleSelect,
 	KolCombobox,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 
 import { SampleDescription } from '../components/SampleDescription';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
@@ -37,7 +37,7 @@ type Props = {
 	testId?: string;
 };
 const Scenario = (props: Props) => {
-	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>();
+	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>(null);
 	const [displayValue, setDisplayValue] = useState<unknown>(undefined);
 	const [modelValue, setModelValue] = useState<unknown>(props.inputProps._value);
 	const formatter = props.formatter || JSON.stringify;

package/src/scenarios/performance-test.tsx

@@ -1,4 +1,4 @@
-import { KolInputCheckbox, KolInputNumber, KolInputText } from '@public-ui/react';
+import { KolInputCheckbox, KolInputNumber, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';

package/src/scenarios/same-height-of-all-interactive-elements.tsx

@@ -13,7 +13,7 @@ import {
 	KolSelect,
 	KolSingleSelect,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';

package/src/scenarios/static-form.tsx

@@ -15,7 +15,7 @@ import {
 	KolCombobox,
 	KolTextarea,
 	KolHeading,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';

package/src/scenarios/tooltip-positioning.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolPopoverButton } from '@public-ui/react';
+import { KolPopoverButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../components/SampleDescription';
 
 export const TooltipPositioning: FC = () => {

package/src/style.scss

@@ -7,6 +7,7 @@
 
 body {
 	margin: 0;
+
 	font-family: Verdana;
 	font-size: rem(16);
 	line-height: normal;
@@ -28,20 +29,21 @@ hr {
 }
 
 .visually-hidden {
-	clip: rect(0 0 0 0);
-	clip-path: inset(50%);
+	position: absolute;
+	width: 1px;
 	height: 1px;
 	overflow: hidden;
-	position: absolute;
+
 	white-space: nowrap;
-	width: 1px;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
 }
 
 .black-background {
 	background-color: black;
 	display: flex;
-	flex-direction: column;
 	padding: rem(8);
+	flex-direction: column;
 }
 
 .w-image {
@@ -54,25 +56,26 @@ hr {
 
 /* Remove bullet points from horizontal link lists */
 .list-none {
-	list-style: none;
 	margin: 0;
 	padding: 0;
+	list-style: none;
 }
 
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
-		grid-template-columns: rem(360) calc(100% - rem(360));
-		min-height: 100vh;
 		height: 100%;
+		min-height: 100vh;
+		grid-template-columns: rem(360) calc(100% - rem(360));
 	}
 
 	.app-sidebar {
-		border-right: 1px solid gray;
 		position: relative;
 		z-index: 1;
+		border-right: 1px solid gray;
 
 		& .scrollable-container-wrapper {
+			display: flex;
 			position: fixed;
 			top: 0;
 			bottom: 0;
@@ -80,11 +83,10 @@ hr {
 			width: rem(330);
 			margin: rem(16);
 			flex-direction: column;
-			display: flex;
 
 			& .scrollable-container {
-				flex: 1 auto;
 				overflow: auto;
+				flex: 1 auto;
 			}
 		}
 	}