formatting

src/app/[locale]/(landing)/components/filters/filters.server.tsx

@@ -1,24 +1,21 @@
-import {Suspense} from 'react';
-import LandingFiltersGroups from "@/app/(landing)/components/filters/filtersGroups.server";
-import {ReactNodeProps} from "@/types/types";
+import { Suspense } from 'react';
+import LandingFiltersGroups from '@/app/(landing)/components/filters/filtersGroups.server';
+import { ReactNodeProps } from '@/types/types';
 
 export default async function LandingFilters() {
   return (
     <LandingFiltersContainer>
-        <Suspense>
-          <LandingFiltersGroups />
-        </Suspense>
+      <Suspense>
+        <LandingFiltersGroups />
+      </Suspense>
     </LandingFiltersContainer>
   );
 }
 
-
-function LandingFiltersContainer({children}: ReactNodeProps) {
+function LandingFiltersContainer({ children }: ReactNodeProps) {
   return (
-      <div className="relative bg-secondary">
-        <div className="w-full grid grid-cols-3">
-          {children}
-        </div>
-      </div>
+    <div className="relative bg-secondary">
+      <div className="grid w-full grid-cols-3">{children}</div>
+    </div>
   );
-}
+}

src/app/[locale]/(landing)/components/filters/filtersGroups.server.tsx

@@ -4,17 +4,16 @@ import { getGraphQLFilters } from '@/api/graphql/filters';
 export default async function LandingFiltersGroups() {
   const filters = await getGraphQLFilters();
   return (
-      <>
-        {Object.entries(filters).map(([key, value], index) => (
-                <FilterGroup
-                    key={key}
-                    title={key as 'faculties' | 'formats' | 'languages'}
-                    filters={value}
-                    hasLeftBorder={index === 0}
-                    hasRightBorder={index === Object.keys(filters).length - 1}
-                />
-            )
-        )}
-      </>
+    <>
+      {Object.entries(filters).map(([key, value], index) => (
+        <FilterGroup
+          key={key}
+          title={key as 'faculties' | 'formats' | 'languages'}
+          filters={value}
+          hasLeftBorder={index === 0}
+          hasRightBorder={index === Object.keys(filters).length - 1}
+        />
+      ))}
+    </>
   );
 }

src/app/[locale]/(landing)/components/landing.server.tsx

@@ -15,7 +15,7 @@ export default function Landing({ searchParams }: LandingProps) {
     extractProjectLanguageSearchParam(searchParams);
   return (
     <LandingContainer>
-      <div className="relative grow-[1] h-full border-x-border rounded-border">
+      <div className="relative h-full grow-[1] rounded-border border-x-border">
         <LandingProjectWriting
           languageSearchParam={projectLanguageSearchParam}
         />
@@ -28,7 +28,7 @@ export default function Landing({ searchParams }: LandingProps) {
 
 function LandingContainer({ children }: { children: ReactNode }) {
   return (
-    <main className="flex flex-col max-h-content min-h-content h-content bg-primary overflow-hidden">
+    <main className="flex h-content max-h-content min-h-content flex-col overflow-hidden bg-primary">
       {children}
     </main>
   );

src/app/[locale]/(landing)/components/project/writing.tsx

@@ -21,7 +21,7 @@ export default function LandingProjectWriting({
 }
 function LandingProjectWritingContainer({ children }: { children: ReactNode }) {
   return (
-    <div className="h-full flex items-center justify-center px-[9vw] bg-secondary">
+    <div className="flex h-full items-center justify-center bg-secondary px-[9vw]">
       {children}
     </div>
   );

src/app/[locale]/design/components/content/header.server.tsx

@@ -12,7 +12,7 @@ export default function DesignContentHeader() {
 function DesignContentHeaderContainer({ children }: HtmlProps) {
   return (
     <div className="fixed  hidden h-header max-h-header min-h-header w-[80vw] bg-primary md:flex">
-      <div className="border-b-xs border-r-xs flex h-full w-1/2 items-end justify-stretch rounded-border border-border border-t-0 border-primary bg-secondary px-[1.5rem] py-[0.5rem]">
+      <div className="flex h-full w-1/2 items-end justify-stretch rounded-border border-border border-b-xs border-r-xs border-t-0 border-primary bg-secondary px-[1.5rem] py-[0.5rem]">
         <h1 className="text-xxs text-grey">{children}</h1>
       </div>
       <ToggleMute />

src/app/[locale]/design/components/content/project/audioPlayer.server.tsx

@@ -1,7 +1,9 @@
 import { HtmlProps } from '@/components/html/html';
 import AudioPlayer from '@/components/audioPlayer';
 
-export default function DesignContentProjectAudioPlayer({ languageSearchParam }) {
+export default function DesignContentProjectAudioPlayer({
+  languageSearchParam,
+}) {
   return (
     <DesignContentProjectAudioContainer>
       <AudioPlayer

src/app/[locale]/design/components/content/projects.server.tsx

@@ -8,7 +8,7 @@ export default function DesignContentProjects() {
       {Object.values(projects).map((project) => (
         <DesignContentProject key={project.artist} project={project} />
       ))}
-      <div className="col-span-2 hidden h-full w-full rounded-border bg-secondary md:inline-block" />
+      <div className="col-span-2 hidden h-full w-full rounded-t-border rounded-bl-border bg-secondary md:inline-block" />
     </DesignContentProjectsContainer>
   );
 }
@@ -17,7 +17,7 @@ function DesignContentProjectsContainer({ children }: HtmlProps) {
   return (
     <div>
       <div className="hidden h-content-header max-h-content-header min-h-content-header md:block" />
-      <div className="md:border-t-xs md:border-r-xs col-span-4 grid h-content max-h-content min-h-content grid-cols-1 gap-border overflow-y-auto border-border border-y-0 bg-primary md:h-content-body md:max-h-content-body md:min-h-content-body md:grid-cols-4">
+      <div className="scrollable col-span-4 grid h-content max-h-content min-h-content grid-cols-1 gap-border overflow-y-auto border-border border-y-0  md:h-content-body md:max-h-content-body md:min-h-content-body md:grid-cols-4 md:border-r-xs md:border-t-xs">
         {children}
       </div>
     </div>

src/app/[locale]/design/components/content/toggleMute.client.tsx

@@ -30,7 +30,7 @@ export default function ToggleMute() {
 export function MuteButton({ handleClick, children }) {
   return (
     <button
-      className="border-x-xs flex h-full w-full items-center justify-around rounded-md border-primary bg-secondary hover:bg-highlight hover:fill-black hover:text-black"
+      className="flex h-full w-full items-center justify-around rounded-md border-xs border-t-0 border-primary bg-secondary hover:bg-highlight hover:fill-black hover:text-black"
       onClick={handleClick}
     >
       {children}

src/app/[locale]/design/components/sidebar/sidebar.server.tsx

@@ -14,7 +14,7 @@ export default function DesignSidebar() {
 function DesignSidebarContainer({ children }: HtmlProps) {
   return (
     <div className="col-span-2 bg-primary md:col-span-1">
-      <div className="border-l-xs fixed h-content max-h-content min-h-content w-[66.666666%] overflow-y-scroll border-r-border bg-primary md:w-[20vw] md:rounded-border md:bg-secondary">
+      <div className="fixed h-content max-h-content min-h-content w-2/3 overflow-y-scroll border-l-xs border-r-border bg-primary md:w-[20vw] md:rounded-t-border md:bg-secondary">
         {children}
       </div>
     </div>

src/app/[locale]/info/components/content/about.server.tsx

@@ -1,23 +1,30 @@
 import { HtmlProps } from '@/components/html/html';
 import { ResponsiveMultiLineText } from '@/components/texts/multiLine';
 import { infoAbout } from '@/data';
-import {ResponsiveH1} from "@/components/html/h1";
-import {useTranslations} from "next-intl";
+import { ResponsiveH1 } from '@/components/html/h1';
+import { useTranslations } from 'next-intl';
 
 export default function InfoContentAbout() {
-    const t = useTranslations('Info')
+  const t = useTranslations('Info');
   return (
     <InfoContentAboutContainer>
-      <ResponsiveH1 className="md:hidden text-grey mb-gutter-xs" textSize="xs">{t('about')}</ResponsiveH1>
+      <ResponsiveH1 className="mb-gutter-xs text-grey md:hidden" textSize="xs">
+        {t('about')}
+      </ResponsiveH1>
       <ResponsiveMultiLineText text={infoAbout.en} textSize="m" />
-      <ResponsiveH1 className="md:hidden text-grey mt-auto pt-gutter-lg pb-gutter-xs" textSize="xs">{t('information')}</ResponsiveH1>
+      <ResponsiveH1
+        className="mt-auto pb-gutter-xs pt-gutter-lg text-grey md:hidden"
+        textSize="xs"
+      >
+        {t('information')}
+      </ResponsiveH1>
     </InfoContentAboutContainer>
   );
 }
 
 function InfoContentAboutContainer({ children }: HtmlProps) {
   return (
-    <div className="md:col-span-2 h-fit md:h-content-body md:max-h-content-body md:min-h-content-body md:overflow-y-scroll rounded-b-border rounded-tl-border md:rounded-border bg-secondary pt-gutter-lg px-gutter-m md:py-gutter-lg md:px-gutter-m">
+    <div className="h-fit rounded-b-border rounded-tl-border bg-secondary px-gutter-m pt-gutter-lg md:col-span-2 md:h-content-body md:max-h-content-body md:min-h-content-body md:overflow-y-scroll md:rounded-border md:px-gutter-m md:py-gutter-lg">
       {children}
     </div>
   );

src/app/[locale]/info/components/content/content.server.tsx

@@ -5,15 +5,15 @@ import InfoContentAbout from '@/app/info/components/content/about.server';
 export default function InfoContent() {
   return (
     <InfoContentContainer>
-        <InfoContentAbout />
-        <InfoContentInfo />
+      <InfoContentAbout />
+      <InfoContentInfo />
     </InfoContentContainer>
   );
 }
 
 function InfoContentContainer({ children }: HtmlProps) {
   return (
-    <div className="h-content md:h-content-body max-h-content md:max-h-content-body min-h-content md:min-h-content-body border-x-border grid grid-cols-1 wrap md:grid-cols-5 gap-border overflow-y-scroll md:overflow-hidden">
+    <div className="wrap grid h-content max-h-content min-h-content grid-cols-1 gap-border overflow-y-scroll border-x-border md:h-content-body md:max-h-content-body md:min-h-content-body md:grid-cols-5 md:overflow-hidden">
       {children}
     </div>
   );

src/app/[locale]/info/components/content/info/info.server.tsx

@@ -33,14 +33,14 @@ export default async function InfoContentInfo() {
       {infoItems.map((item) => (
         <InfoContentInfoItem key={item.id} item={item} />
       ))}
-      <div className="hidden md:block grow-[1] rounded-md bg-white"></div>
+      <div className="hidden grow-[1] rounded-md bg-white md:block"></div>
     </InfoContentInfoContainer>
   );
 }
 
 function InfoContentInfoContainer({ children }: HtmlProps) {
   return (
-    <div className="md:col-span-3 flex md:h-content-body md:max-h-content-body md:min-h-content-body flex-col gap-border md:overflow-y-scroll">
+    <div className="flex flex-col gap-border md:col-span-3 md:h-content-body md:max-h-content-body md:min-h-content-body md:overflow-y-scroll">
       {children}
     </div>
   );

src/app/[locale]/info/components/content/info/item/item.client.tsx

@@ -22,20 +22,20 @@ export default function InfoContentInfoItem({
 
   return (
     <InfoContentInfoItemContainer onClick={onClick}>
-      <InfoContentInfoItemTitle item={item}/>
-        {isOpen && (
-            <ResponsiveMultiLineText
-                className="pb-[40px] pt-[14px] text-black [&>a]:underline"
-                text={item.text}
-                textSize="sm"
-            />
-        )}
+      <InfoContentInfoItemTitle item={item} />
+      {isOpen && (
+        <ResponsiveMultiLineText
+          className="pb-[40px] pt-[14px] text-black [&>a]:underline"
+          text={item.text}
+          textSize="sm"
+        />
+      )}
     </InfoContentInfoItemContainer>
   );
 }
 
 function InfoContentInfoItemContainer({
-                                        onClick,
+  onClick,
   children,
 }: HtmlProps & {
   onClick: (_: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;

src/app/[locale]/info/components/content/info/item/title.client.tsx

@@ -4,7 +4,9 @@ import { cn } from '@/lib/utils';
 import { HtmlProps } from '@/components/html/html';
 import { ResponsiveH5 } from '@/components/html/h5';
 
-export default function InfoContentInfoItemTitle({item}: InfoContentInfoItemProps) {
+export default function InfoContentInfoItemTitle({
+  item,
+}: InfoContentInfoItemProps) {
   return (
     <InfoContentInfoItemTitleContainer>
       {item.title}
@@ -14,7 +16,10 @@ export default function InfoContentInfoItemTitle({item}: InfoContentInfoItemProp
 
 function InfoContentInfoItemTitleContainer({ className, children }: HtmlProps) {
   return (
-    <ResponsiveH5 className={cn('h-content-header flex items-center', className)} textSize="m">
+    <ResponsiveH5
+      className={cn('flex h-content-header items-center', className)}
+      textSize="m"
+    >
       {children}
     </ResponsiveH5>
   );

src/app/[locale]/info/components/headers/header.server.tsx

@@ -1,25 +1,30 @@
 import { ResponsiveH1 } from '@/components/html/h1';
 import { HtmlProps } from '@/components/html/html';
 import { cn } from '@/lib/utils';
-import {useTranslations} from "next-intl";
+import { useTranslations } from 'next-intl';
 
 export type InfoHeaderProps = {
   className?: string;
   translation: 'about' | 'information';
 };
 
-export default function InfoHeader({ className, translation }: InfoHeaderProps) {
+export default function InfoHeader({
+  className,
+  translation,
+}: InfoHeaderProps) {
   const t = useTranslations('Info');
   return (
-    <InfoHeaderContainer className={className}>{t(translation)}</InfoHeaderContainer>
+    <InfoHeaderContainer className={className}>
+      {t(translation)}
+    </InfoHeaderContainer>
   );
 }
 
 function InfoHeaderContainer({ className, children }: HtmlProps) {
   return (
     <ResponsiveH1
       className={cn(
-        'px-gutter-m pb-gutter-xs col-span-2 flex items-end text-grey',
+        'col-span-2 flex items-end px-gutter-m pb-gutter-xs text-grey',
         className,
       )}
       textSize="xs"

src/app/[locale]/info/components/headers/headers.server.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils';
 import { HtmlProps } from '@/components/html/html';
 
 const indexToColSpanClassName: string[] = ['col-span-2', 'col-span-3'];
-const translations: ('about' | 'information')[] = ['about', 'information']
+const translations: ('about' | 'information')[] = ['about', 'information'];
 
 export default function InfoHeaders() {
   return (
@@ -24,7 +24,7 @@ function InfoHeadersContainer({ children }: HtmlProps) {
   return (
     <div
       className={cn(
-        'hidden md:grid h-content-header max-h-content-header border-x-border border-b-border rounded-border min-h-content-header grid-cols-5 bg-secondary text-primary',
+        'hidden h-content-header max-h-content-header min-h-content-header grid-cols-5 rounded-border border-x-border border-b-border bg-secondary text-primary md:grid',
         sizeToHeightClassName['md'],
       )}
     >

src/app/[locale]/loading.tsx

@@ -1,9 +1,9 @@
 export default function Loading() {
   return (
-    <main className="bg-primary min-h-content h-content w-screen">
-        <div className="bg-secondary mx-border rounded h-full flex justify-center items-center">
-            <p>Loading...</p>
-        </div>
+    <main className="h-content min-h-content w-screen bg-primary">
+      <div className="mx-border flex h-full items-center justify-center rounded bg-secondary">
+        <p>Loading...</p>
+      </div>
     </main>
   );
 }

src/app/[locale]/locations/[[...slug]]/components/map/index.server.tsx

@@ -4,7 +4,7 @@ import MapProviderContainer from './container';
 import { Suspense } from 'react';
 import { LocationItem } from '@/types/types';
 
-export const revalidate = 0;
+export const revalidate = 100;
 export default async function LocationsMap({
   location,
 }: {

src/app/[locale]/locations/[[...slug]]/components/map/useMapFunctions.ts

@@ -1,18 +1,20 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useMemo, useEffect, useState, RefObject } from 'react';
 import { useMap } from 'react-map-gl/maplibre';
 import { Context } from '@/types/graphql';
 import { MapLayerMouseEvent } from 'maplibre-gl';
 import { useDebounce } from '@/lib/useDebounce';
 import { useRouter } from '@/navigation';
-import bbox from '@turf/bbox';
+import { bbox } from '@turf/bbox';
+import { Building } from '@/types/types';
 
 const MOBILE_WIDTH = 1000;
 
 type MarkerType = { [index: string]: { scale: number; size: number } };
 
 const useMapFunctions = (
   place: string | null,
-  locations: GeoJSON.FeatureCollection,
+  locations: GeoJSON.FeatureCollection<GeoJSON.Point, Building>,
   size: { width: any; height?: number },
 ) => {
   const { rundgangMap } = useMap();
@@ -53,7 +55,7 @@ const useMapFunctions = (
   }, [locations, debouncedZoom, rundgangMap]);
 
   const focusMap = useCallback(
-    (targetBoundingBox) => {
+    (targetBoundingBox: GeoJSON.Feature<GeoJSON.Point, Building>) => {
       if (rundgangMap) {
         let padding = {
           right: size?.width <= MOBILE_WIDTH ? 0 : 1,
@@ -62,7 +64,10 @@ const useMapFunctions = (
           bottom: 0,
         };
         let maxZoom = 11.4;
-        let coords = [13.45, 52.5, 13.45, 52.5];
+        let coords = bbox({
+          type: 'Point',
+          coordinates: [13.45, 52.5],
+        });
 
         if (targetBoundingBox) {
           padding.right =