Is this the solution??

frontend/packages/shared/src/hooks/useSelectedFormLayoutSetName.ts

@@ -1,17 +1,21 @@
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
 import { useLocalStorage } from '@studio/components/src/hooks/useLocalStorage';
 import { toast } from 'react-toastify';
+import { type LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
+
+const defaultLayoutSetName: string = 'form';
 
 export type UseSelectedFormLayoutSetNameResult = {
   selectedFormLayoutSetName: string;
   setSelectedFormLayoutSetName: (layoutName: string) => void;
 };
 
-export const useSelectedFormLayoutSetName = (): UseSelectedFormLayoutSetNameResult => {
-  const { org, app } = useStudioEnvironmentParams();
-  const { data: layoutSets } = useLayoutSetsQuery(org, app);
-  const defaultLayoutSet = layoutSets?.sets[0]?.id;
+export const useSelectedFormLayoutSetName = (
+  layoutSets: LayoutSets,
+): UseSelectedFormLayoutSetNameResult => {
+  const { app } = useStudioEnvironmentParams();
+
+  const defaultLayoutSet = layoutSets?.sets[0]?.id ?? defaultLayoutSetName;
 
   const [selectedFormLayoutSetName, setSelectedFormLayoutSetName] = useLocalStorage<string>(
     'layoutSet/' + app,
@@ -28,7 +32,7 @@ export const useSelectedFormLayoutSetName = (): UseSelectedFormLayoutSetNameResu
   });
 
   return {
-    selectedFormLayoutSetName: layoutSetExists ? selectedFormLayoutSetName : defaultLayoutSet,
+    selectedFormLayoutSetName: layoutSetExists ? selectedFormLayoutSetName : defaultLayoutSet, // MÅ FIKSES
     setSelectedFormLayoutSetName,
   };
 };

frontend/packages/ux-editor/src/AppContext.tsx

@@ -1,9 +1,13 @@
-import type { MutableRefObject } from 'react';
+import type { MutableRefObject, ReactElement, ReactNode } from 'react';
 import React, { createContext, useCallback, useMemo, useRef } from 'react';
 import type { QueryClient, QueryKey } from '@tanstack/react-query';
 import { useSelectedFormLayoutName } from 'app-shared/hooks/useSelectedFormLayoutName';
 import { useSelectedFormLayoutSetName } from 'app-shared/hooks/useSelectedFormLayoutSetName';
 import { AppsQueryKey } from 'app-shared/types/AppsQueryKey';
+import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
+import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
+import { StudioPageSpinner } from '@studio/components';
+import { useTranslation } from 'react-i18next';
 
 export interface WindowWithQueryClient extends Window {
   queryClient?: QueryClient;
@@ -39,8 +43,13 @@ export const AppContextProvider = ({
   onLayoutSetNameChange,
 }: AppContextProviderProps): React.JSX.Element => {
   const previewIframeRef = useRef<HTMLIFrameElement>(null);
+
+  const { org, app } = useStudioEnvironmentParams();
+  const { data: layoutSets, isPending: pendingLayoutsets } = useLayoutSetsQuery(org, app);
+
   const { selectedFormLayoutSetName, setSelectedFormLayoutSetName } =
-    useSelectedFormLayoutSetName();
+    useSelectedFormLayoutSetName(layoutSets);
+
   const { selectedFormLayoutName, setSelectedFormLayoutName } =
     useSelectedFormLayoutName(selectedFormLayoutSetName);
 
@@ -80,6 +89,9 @@ export const AppContextProvider = ({
     [refetch],
   );
 
+  if (pendingLayoutsets) {
+  }
+
   const value = useMemo(
     () => ({
       previewIframeRef,
@@ -108,5 +120,25 @@ export const AppContextProvider = ({
     ],
   );
 
-  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+  return (
+    <AppContext.Provider value={value}>
+      <ChildrenComponent pendingLayoutsets={pendingLayoutsets}>{children}</ChildrenComponent>
+    </AppContext.Provider>
+  );
+};
+
+type ChildrenComponentProps = {
+  pendingLayoutsets: boolean;
+  children: ReactNode;
+};
+const ChildrenComponent = ({
+  pendingLayoutsets,
+  children,
+}: ChildrenComponentProps): ReactElement => {
+  const { t } = useTranslation();
+
+  if (pendingLayoutsets) {
+    return <StudioPageSpinner spinnerTitle={t('ux_editor.loading_page')} />;
+  }
+  return <>{children}</>;
 };

frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PdfConfig/PdfConfigCard/PdfConfigCard.module.css

@@ -2,7 +2,7 @@
   --card-margin-inline: var(--fds-spacing-4);
 
   margin-inline: var(--card-margin-inline);
-  width: calc(auto - var(--card-margin-inline));
+  width: 2px; /*calc(auto - var(--card-margin-inline));*/
 }
 
 .headerWrapper {