Changed layout on intro page

README.md

@@ -91,6 +91,7 @@ The icons may not be reused in other projects without the proper flaticon licens
 
 -   (@GermanBluefox) Extended DM with device type
 -   (@GermanBluefox) Corrected Save&Close button for the instance configs
+-   (@GermanBluefox) Changed layout on intro page
 
 ### 7.4.12 (2025-01-11)
 

packages/admin/src-admin/src/components/Intro/IntroCard.tsx

@@ -275,8 +275,10 @@ class IntroCard<TProps extends IntroCardProps, TState extends IntroCardState> ex
                     sm: 6,
                     md: 4,
                     lg: 3,
+                    xl: 2,
                 }}
                 sx={Utils.getStyle(this.props.theme, styles.root, this.props.style)}
+                style={{ maxWidth: 500 }}
             >
                 <Link
                     href={

packages/admin/src-admin/src/tabs/Intro.tsx

@@ -2,7 +2,7 @@ import React, { type JSX } from 'react';
 
 import semver from 'semver';
 
-import { Fab, Snackbar, Tooltip, Grid2, LinearProgress, Skeleton } from '@mui/material';
+import { Fab, Snackbar, Tooltip, LinearProgress, Skeleton } from '@mui/material';
 
 import {
     Add as AddIcon,
@@ -18,7 +18,6 @@ import {
     type IobTheme,
     type Translate,
     TabContainer,
-    TabContent,
 } from '@iobroker/adapter-react-v5';
 
 import type { InstancesWorker, InstanceEvent } from '@/Workers/InstancesWorker';
@@ -121,6 +120,12 @@ const styles: Record<string, any> = {
     tooltip: {
         pointerEvents: 'none',
     },
+    viewModeDiv: {
+        display: 'flex',
+        flexFlow: 'wrap',
+        overflow: 'auto',
+        justifyContent: 'left',
+    },
 };
 
 interface ReverseProxyItem {
@@ -1580,21 +1585,12 @@ class Intro extends React.Component<IntroProps, IntroState> {
                         {...this.state.nodeUpdateDialog}
                     />
                 ) : null}
-                <TabContent style={styles.container}>
-                    {/* This fragment is required here
-                to split directives of Grid2 in TabContent and Grid2 directives in Intro */}
-                    <>
-                        <Grid2
-                            container
-                            spacing={2}
-                        >
-                            {this.getInstancesCards()}
-                            {this.getLinkCards()}
-                        </Grid2>
-                    </>
-                    {this.getButtons()}
-                    {this.editLinkCard()}
-                </TabContent>
+                <div style={styles.viewModeDiv}>
+                    {this.getInstancesCards()}
+                    {this.getLinkCards()}
+                </div>
+                {this.getButtons()}
+                {this.editLinkCard()}
             </TabContainer>
         );
     }