Merge branch 'main' into recipes

src/admin/AdminAppConfigurationClient.tsx

@@ -27,6 +27,7 @@ import { IoMdGrid } from 'react-icons/io';
 import { CgDebug } from 'react-icons/cg';
 import EnvVar from '@/components/EnvVar';
 import AdminLink from './AdminLink';
+import ScoreCardContainer from '@/components/ScoreCardContainer';
 
 export default function AdminAppConfigurationClient({
   // Storage
@@ -162,7 +163,7 @@ export default function AdminAppConfigurationClient({
     </WarningNote>;
 
   return (
-    <>
+    <ScoreCardContainer>
       <ChecklistGroup
         title="Storage"
         icon={<BiData size={16} />}
@@ -670,6 +671,6 @@ export default function AdminAppConfigurationClient({
             </div>
           </div>}
       </div>
-    </>
+    </ScoreCardContainer>
   );
 }

src/admin/AdminInfoPage.tsx

@@ -1,6 +1,5 @@
 import Container from '@/components/Container';
 import SiteGrid from '@/components/SiteGrid';
-import clsx from 'clsx/lite';
 import { ReactNode } from 'react';
 
 export default function AdminInfoPage({
@@ -23,12 +22,7 @@ export default function AdminInfoPage({
             {accessory}
           </div>
           <Container spaceChildren={false}>
-            <div className={clsx(
+            {children}
-              'max-w-xl w-full',
-              'space-y-6 md:space-y-8',
-            )}>
-              {children}
-            </div>
           </Container>
         </div>}
     />

src/admin/insights/AdminAppInsightsClient.tsx

@@ -39,6 +39,7 @@ import AdminEmptyState from '../AdminEmptyState';
 import { pluralize } from '@/utility/string';
 import Tooltip from '@/components/Tooltip';
 import { useAppState } from '@/state/AppState';
+import ScoreCardContainer from '@/components/ScoreCardContainer';
 
 const DEBUG_COMMIT_SHA = '4cd29ed';
 const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';
@@ -119,7 +120,7 @@ export default function AdminAppInsightsClient({
   </a>;
 
   return (
-    <>
+    <ScoreCardContainer>
       {(codeMeta || debug) && <>
         <ScoreCard title="Source code">
           {(codeMeta?.didError || debug) &&
@@ -393,6 +394,6 @@ export default function AdminAppInsightsClient({
           content={descriptionWithSpaces}
         />}
       </ScoreCard>
-    </>
+    </ScoreCardContainer>
   );
 }

src/components/ScoreCardContainer.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import clsx from 'clsx/lite';
+
+export default function ScoreCardContainer({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return <div className={clsx(
+    'max-w-xl w-full',
+    'space-y-6 md:space-y-8',
+  )}>
+    {children}
+  </div>;
+}