Merge pull request axonivy#823 from axonivy/fix-responsive-welcome-page

ivy-lli · web-flow · commit db480e6b07cc · 2025-12-19T10:26:21.000+01:00
XIVY-18150 Fix responsive welcome page
diff --git a/webviews/welcome-page/index.html b/webviews/welcome-page/index.html
@@ -1,13 +1,15 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Welcome Page</title>
-  </head>
 
-  <body id="webview-body">
-    <div id="root" style="height: 100%"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome Page</title>
+</head>
+
+<body id="webview-body">
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/webviews/welcome-page/src/components/WelcomePage.css b/webviews/welcome-page/src/components/WelcomePage.css
@@ -6,7 +6,7 @@
 .welcome-page {
   background-color: var(--background);
   width: 100%;
-  height: 100%;
+  min-height: 100vh;
 }
 
 .welcome-page-content {
@@ -37,6 +37,12 @@
   gap: 1em;
 }
 
+@media (max-width: 1050px) {
+  .welcome-page-row {
+    grid-template-columns: 1fr;
+  }
+}
+
 .welcome-section-divider {
   background-color: var(--N200);
   border: none;
diff --git a/webviews/welcome-page/src/index.tsx b/webviews/welcome-page/src/index.tsx
@@ -2,7 +2,6 @@ import { ThemeProvider } from '@axonivy/ui-components';
 import '@axonivy/vscode-webview-common/css/colors.css';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-
 import type { NotificationType } from 'vscode-messenger-common';
 import { WelcomePage } from './components/WelcomePage';
 import { initTranslation } from './i18n';
