asab_webui_shell 25.1.13 → 25.2.1-alpha.2

package/dist/index.js

@@ -40,6 +40,7 @@ Object.defineProperty(exports, "getBrandImage", {
     return _BrandImage.getBrandImage;
   }
 });
+require("./styles/index.scss");
 var _Application = _interopRequireDefault(require("./containers/Application"));
 var _BrandImage = require("./components/branding/BrandImage");
 var _i18n = _interopRequireDefault(require("./modules/i18n"));

package/dist/screens/SuspenseScreen.scss

@@ -2,8 +2,10 @@
 	display: flex;
 	align-items: center; /* Vertically center */
 	justify-content: center; /* Horizontally center */
+
+
 }
 
 .suspense-img {
 	max-width: 500px;
-}
+}

package/dist/styles/components/alert.scss

@@ -0,0 +1,53 @@
+.alert {
+	border: none;
+	--bs-alert-padding-y: 0.75rem;
+	>.btn-close {
+		padding: 1rem;
+	}
+}
+
+[data-bs-theme=dark] {
+	.alert {
+		color: inherit;
+	}
+
+	.alert- {
+
+		&primary {
+			background-color: rgba(var(--bs-primary-rgb));
+		}
+
+		&secondary {
+			background-color: rgba(var(--bs-secondary-rgb));
+		}
+
+		&success {
+			background-color: rgba(var(--bs-success-rgb));
+		}
+
+		&danger {
+			background-color: rgba(var(--bs-danger-rgb));
+		}
+
+		&warning {
+			background-color: rgba(var(--bs-warning-rgb));
+		}
+
+		&info {
+			background-color: rgba(var(--bs-info-rgb));
+			color: rgba(var(--bs-alert-info-color-rgb));
+			> .btn-close {
+				// This will align color of close btn with text color
+				filter: unset;
+			}
+		}
+
+		&light {
+			background-color: rgba(var(--bs-light-rgb));
+		}
+
+		&dark {
+			background-color: rgba(var(--bs-dark-rgb));
+		}
+	}
+}

package/dist/styles/components/button.scss

@@ -0,0 +1,105 @@
+[class^="btn btn-"] {
+	border: none;
+}
+
+.btn {
+	--bs-btn-font-size: var(--bs-body-font-size);
+	--bs-btn-border-radius: 0px;  // No radius for buttons
+	--bs-btn-border-color: transparent; // No border color for buttons
+}
+
+.btn-link {
+	text-decoration: none;
+}
+
+[class^="btn btn-outline"].disabled {
+	//this will enable pointer events, so the 'title' attribute is shown on hover
+	pointer-events: auto;
+	cursor: default;
+	
+	&:hover {
+		background-color: unset;
+		filter: unset;
+	}
+
+	&:active {
+		--bs-btn-active-color: var(--bs-btn-disabled-color);
+		filter: unset;
+	}
+}
+
+[class^="btn"].btn.disabled {
+		//this will enable pointer events, so the 'title' attribute is shown on hover
+		pointer-events: auto;
+		cursor: default;
+		
+		&:hover {
+			filter: unset;
+		}
+
+		&:active {
+			//background should not change on :active to appear still disabled
+			--bs-btn-active-bg: var(--bs-btn-disabled-bg);
+			filter: unset;
+		}
+}
+
+.btn-primary {
+	--bs-btn-bg: var(--royal-blue);
+}
+
+.btn-outline-primary{
+	--bs-btn-color: var(--royal-blue);
+	&:active {
+		--bs-btn-active-bg: var(--royal-blue);
+	}
+}
+
+[data-bs-theme=dark] {
+	.btn-primary {
+		--bs-btn-bg: var(--soft-sky-blue);
+	}
+
+	.btn-outline-primary {
+		--bs-btn-color: var(--soft-sky-blue);
+		&:active {
+		--bs-btn-active-bg: var(--soft-sky-blue);
+		}
+	}
+
+	.btn-info {
+		--bs-btn-color: var(--deep-space-blue);
+	}
+}
+
+.btn-primary {
+	&:hover {
+		filter: brightness(80%);    
+	}
+}
+
+.btn-outline- {
+	&primary:hover {
+		background-color: rgba(var(--bs-primary-rgb), 0.75);
+	} 
+
+	&secondary:hover {
+		background-color: rgba(var(--bs-secondary-rgb), 0.75);
+	}
+
+	&success:hover {
+		background-color: rgba(var(--bs-success-rgb), 0.75);
+	}
+
+	&danger:hover {
+		background-color: rgba(var(--bs-danger-rgb), 0.75);
+	}
+
+	&warning:hover {
+		background-color: rgba(var(--bs-warning-rgb), 0.75);
+	}
+
+	&info:hover {
+		background-color: rgba(var(--bs-info-rgb), 0.75);
+	}
+}

package/dist/styles/components/card.scss

@@ -0,0 +1,174 @@
+[data-bs-theme=dark] .card {
+	--bs-card-cap-bg: unset;
+}
+
+.card {
+	--bs-card-border-color: var(--bs-border-color);
+	--bs-card-cap-bg: var(--white);
+	--bs-card-cap-padding-y: 0.9rem;
+
+	> .card-header h3,  > .card-header-flex h3 {
+		font-size: 1.2rem;
+		color: var(--bs-body-color);
+	}
+
+	button[class*="btn-outline"],
+	button[class*="btn-outline"]:disabled {
+		--bs-btn-border-color: inherit;
+	}
+}
+
+$card-flex-height: 3.2rem;
+
+// Extending `.card-header` class to accept flex sub-items
+.card-header-flex {	
+	// @extend .d-flex from bootstrap
+	display: flex !important;
+
+	// @extend .align-items-center from bootstrap
+	align-items: center !important;
+
+	min-height: $card-flex-height; // The height must be set for flex class
+
+	// @extend .card-header from bootstrap
+	color: var(--bs-card-cap-color);
+	background-color: var(--bs-card-cap-bg);
+	border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+
+	padding: 0;
+	margin: 0;
+
+	> * {
+		padding: 0 var(--bs-card-cap-padding-x);
+
+		display: flex;
+		height: $card-flex-height;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	> .btn {
+		--bs-btn-border-color: transparent;
+		border-radius: 0;
+
+		&:first-child {
+			border-radius: var(--bs-border-radius) 0 0 0;
+		}
+
+		&:last-child {
+			border-radius: 0 var(--bs-border-radius) 0 0;
+		}
+	}
+
+	> .dropdown {
+		padding: 0;
+
+		&:first-child > .btn {
+			border-radius: var(--bs-border-radius) 0 0 0;
+		}
+
+		&:last-child > .btn {
+			border-radius: 0 var(--bs-border-radius) 0 0;
+		}
+
+		.dropdown-toggle {
+			--bs-btn-border-color: transparent;
+			border-radius: 0;
+			height: 100%;
+		}
+	}
+
+	> .nav {
+		padding: 0;
+		display: contents;
+
+		.nav-item a {
+			border: none;
+			background: inherit;
+			border-bottom: 2px solid transparent;
+		}
+
+		.nav-item a:hover {
+			cursor: pointer;
+			border-bottom: 2px solid var(--bs-secondary);
+		}
+
+		.nav-item a.active {
+			border-bottom: 2px solid var(--bs-primary);
+		}
+	}
+
+	h2, h3, h4, h5, h6 {
+		margin-bottom: 0;
+	}
+}
+
+
+.card-footer-flex {	
+	// @extend .d-flex from bootstrap
+	display: flex!important;
+
+	// @extend .align-items-center from bootstrap
+	align-items: center!important;
+
+	min-height: $card-flex-height; // The height must be set for flex class
+
+	// @extend .card-header from bootstrap
+	color: var(--bs-card-cap-color);
+	background-color: var(--bs-card-cap-bg);
+	border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+
+	padding: 0;
+	margin: 0;
+
+	> * {
+		padding: 0 var(--bs-card-cap-padding-x);
+
+		display: flex;
+		height: $card-flex-height;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	> .btn {
+		--bs-btn-border-color: transparent;
+		border-radius: 0;
+
+		&:first-child {
+			border-radius: 0 0 0 var(--bs-border-radius);
+		}
+
+		&:last-child {
+			border-radius: 0 0 var(--bs-border-radius) 0;
+		}
+	}
+
+
+	> .dropdown {
+		padding: 0;
+
+		&:first-child > .btn {
+			border-radius: 0 0 0 var(--bs-border-radius);
+		}
+
+		&:last-child > .btn {
+			border-radius: 0 0 var(--bs-border-radius) 0;
+		}
+
+		.dropdown-toggle {
+			--bs-btn-border-color: transparent;
+			border-radius: 0;
+			height: 100%;
+		}
+	}
+}
+
+// Styles for enabling fullscreen mode covering header and sidebar
+.card-fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 9999;
+}

package/dist/styles/components/form.scss

@@ -0,0 +1,20 @@
+.form-control, .form-select, .form-check-input {
+	font-size: var(--bs-body-font-size);
+	border-radius: 0px;
+	background-color: var(--bs-input-bg-color);
+	&:focus {
+		box-shadow: none;
+	}
+}
+
+.form-select, .form-check-input {
+	cursor: pointer;
+	&:disabled {
+		cursor: default;
+	}
+}
+
+.form-select option:checked {
+	color: white;
+	background-color: var(--bs-primary);
+}

package/dist/styles/components/html.scss

@@ -0,0 +1,18 @@
+a {
+	text-decoration: none;
+}
+
+hr {
+	border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+	opacity: 1;
+}
+
+pre code {
+	color: var(--bs-code-color);  // The colour of the pre-formatted code has to match <code>
+	tab-size: 4;
+}
+
+code {
+	font-size: var(--asab-monospace-font-size);
+	tab-size: 4;
+}

package/dist/styles/constants/colors.scss

@@ -0,0 +1,69 @@
+// Colors for themes
+// IMPORTANT: Always enter two variants (hex and RGB)
+
+:root {
+	--soft-sky-blue: #7A9CFF; // The link color for a dark theme
+	--soft-sky-blue-rgb: 122, 156, 255;
+
+	--pastel-sky-blue: #DBEEFF; // The link-hover color and body-bg color for a dark theme
+	--pastel-sky-blue-rgb: 219, 238, 255;
+
+	--deep-space-blue: #0E1426; // The dark for a light, dark theme and dark for body bg, tertiary color for a light theme
+	--deep-space-blue-rgb: 14, 20, 38;
+
+	--nightfall-blue: #19223f; // The card-bg and table-bg color for a dark theme
+
+	--deep-ocean-blue: #24366D; // The border and card-border color for dark theme
+	--deep-ocean-blue-rgb: 36, 54, 109;
+
+	--polar-mist: #F3F4FA; // The light for a light and dark theme
+	--polar-mist-rgb: 243, 244, 250;
+
+	--white: #FFFFFF; // The card-bg, table-bg, input-bg color for light theme
+	--white-rgb: 255, 255, 255;
+
+	--royal-blue: #315EE3; // The link and primary color for a light theme
+	--royal-blue-rgb: 49, 94, 227;
+
+	--tropical-rainforest: #3DC9B0;  // Corresponds with vs-dark color (from the Monaco editor)
+	--tropical-rainforest-rgb: 61, 201, 176;
+
+	--teal: #008080; // Corresponds with vs color (from the Monaco editor)
+	--teal-rgb: 0 128 128;
+
+	--lavender-mist: #DDE1F8; // The secondary for a light and dark theme, the border-color for light theme
+	--lavender-mist-rgb: 221, 225, 248;
+
+	--vibrant-magenta: #d63384; // The code color for light theme
+	--vibrant-magenta-rgb: 214, 51, 132;
+
+	--black: #000000; // The body-color for light theme
+	--black-rgb: 0, 0, 0;
+
+	--midnight-blue: #131C37; // The input-bg color for a dark theme
+	--midnight-blue-rgb: 19, 28, 55;
+
+	--slate-smoke: #6a6a6a8f; // The color of the disabled item text in the TreeMenu
+	--slate-smoke-rgb: 106, 106, 106;
+
+	--light-honey: #ffe082; // The color of the lowest Alert severity
+	--light-honey-rgb: 255, 224, 130;
+
+	--bright-orange: #ff9800; // The color of the medium Alert severity
+	--bright-orange-rgb: 255, 125, 0;
+
+	--fiery-sunset: #ff5722; // The color of the high Alert severity
+	--fiery-sunset-rgb: 255, 87, 34;
+
+	--charcoal: #494949; // Console background dark theme
+	--charcoal-rgb: 0, 43, 54;
+
+	--old-lace: #FDF6E3; // Console background light theme
+	--old-lace-rgb: 253, 246, 227;
+
+	--gainsboro: #E0E0E0; // Console font color for dark theme
+	--gainsboro-rgb: rgb(224, 224, 224);
+
+	--moody-blues: #586E75; // Console font color for light theme
+	--moody-blues-rgb: rgb(88, 110, 117);
+}

package/dist/styles/constants/index.scss

@@ -0,0 +1,70 @@
+@use './colors.scss';
+@use './theme-light.scss';
+@use './theme-dark.scss';
+@use './theme-print.scss';
+
+// Universal styling goes here
+// It means fonts, borders but no colors
+// Set only `--bs-*` variables here.
+
+:root {
+	// Font and typography
+	--bs-font-sans-serif: 'Verdana', sans-serif;
+	--bs-body-font-size: 14px;
+
+	--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	--asab-monospace-font-size: 14px;
+
+	--bs-body-line-height: 1.5;
+
+	// Borders
+	--bs-border-radius: 8px;
+	
+}
+
+// Specific components
+
+.list-group {
+	--bs-list-group-bg: transparent;
+}
+
+.dropdown-menu {
+	--bs-dropdown-border-radius: 0px;  // No radius for dropdowns
+	--bs-dropdown-font-size: var(--bs-body-font-size);
+
+	--bs-dropdown-header-color: var(--bs-heading-color);
+	--bs-dropdown-link-color: var(--bs-link-color);
+}
+
+.progress-bar {
+	--bs-progress-height: 16px;
+}
+
+.card {
+	--bs-card-bg: var(--bs-element-bg-color);
+}
+
+.table {
+	--bs-table-bg: var(--bs-body-bg);
+	thead th {
+		/*Setting table header background color*/
+		background-color: transparent;
+	}
+}
+
+.dropdown-menu {
+	--bs-dropdown-bg: var(--bs-element-bg-color);
+}
+
+.input-group-text {
+	border-radius: 0;
+}
+
+.react-json-view {
+	background-color: transparent !important;
+}
+
+/*Fix the position of the monaco hover marker tooltip*/
+.monaco-hover {
+	position: fixed;
+}

package/dist/styles/constants/theme-dark.scss

@@ -0,0 +1,62 @@
+// Set only `--bs-*-color` and `--bs-*-color-rgb` variables from Bootstrap 5
+// https://getbootstrap.com/docs/5.3/customize/css-variables/
+
+[data-bs-theme=dark] {
+
+	/* Bootstrap color variables */
+
+	--bs-primary: var(--soft-sky-blue);
+	--bs-primary-rgb: var(--soft-sky-blue-rgb);
+
+	--bs-secondary: var(--lavender-mist);
+	--bs-secondary-rgb: var(--lavender-mist-rgb);
+
+	--bs-light: var(--polar-mist);
+	--bs-light-rgb: var(--polar-mist-rgb);
+
+	--bs-dark: var(--deep-space-blue);
+	--bs-dark-rgb: var(--deep-space-blue-rgb);
+
+	--bs-link-color: var(--soft-sky-blue);
+	--bs-link-color-rgb: var(--soft-sky-blue-rgb);
+
+	--bs-link-hover-color: var(--pastel-sky-blue);
+	--bs-link-hover-color-rgb: var(--pastel-sky-rgb);
+
+	--bs-code-color: var(--tropical-rainforest);
+	--bs-code-color-rgb: var(--tropical-rainforest-rgb);
+
+	--bs-body-bg: var(--deep-space-blue);
+	--bs-body-bg-rgb: var(--deep-space-blue-rgb);
+
+	--bs-body-color: var(--pastel-sky-blue);
+	--bs-body-color-rgb: var(--pastel-sky-blue-rgb);
+
+	--bs-border-color: var(--deep-ocean-blue);
+	--bs-border-color-rgb: var(--deep-ocean-blue-rgb);
+
+	--bs-input-bg-color: var(--midnight-blue);
+	--bs-input-bg-color-rgb: var(--midnight-blue);
+
+	--bs-element-bg-color: var(--nightfall-blue);
+	--bs-element-bg-color-rgb: var(--nightfall-blue);
+
+	--bs-alert-info-color: var(--deep-space-blue);
+	--bs-alert-info-color-rgb: var(--deep-space-blue-rgb);
+
+	/* Non bootstrap color variables */
+
+	--table-row-hover-bg-color: var(--charcoal-blue);
+	--table-row-hover-bg-color-rgb: var(--charcoal-blue-rgb);
+}
+
+[data-bs-theme=dark] {
+	.progress-bar {
+		--bs-progress-bar-color: var(--white);
+		--bs-progress-bar-bg: var(--soft-sky-blue);
+	}
+
+	.badge.bg-info {
+		--bs-badge-color: var(--deep-space-blue);
+	}
+}

package/dist/styles/constants/theme-light.scss

@@ -0,0 +1,53 @@
+// Set only `--bs-*-color` and `--bs-*-color-rgb` variables from Bootstrap 5
+// https://getbootstrap.com/docs/5.3/customize/css-variables/
+
+:root, [data-bs-theme=light] {
+
+	/* Bootstrap color variables */
+
+	--bs-primary: var(--royal-blue);
+	--bs-primary-rgb: var(--royal-blue-rgb);
+
+	--bs-secondary: var(--lavender-mist);
+	--bs-secondary-rgb: var(--lavender-mist-rgb);
+
+	--bs-light: var(--polar-mist);
+	--bs-light-rgb: var(--polar-mist-rgb);
+
+	--bs-dark: var(--deep-space-blue);
+	--bs-dark-rgb: var(--deep-space-blue-rgb);
+
+	--bs-link-color: var(--royal-blue);
+	--bs-link-color-rgb: var(--royal-blue-rgb);
+
+	--bs-link-hover-color: var(--royal-blue);
+	--bs-link-hover-color-rgb: var(--royal-blue-rgb);
+
+	--bs-code-color: var(--teal);
+	--bs-code-color-rgb: var(--teal-rgb);
+
+	--bs-body-bg: var(--polar-mist);
+	--bs-body-bg-rgb: var(--polar-mist-rgb); 
+
+	--bs-body-color: var(--black);
+	--bs-body-color-rgb: var(--black-rgb);
+
+	--bs-border-color: var(--lavender-mist);
+	--bs-border-color-rgb: var(--lavender-mist-rgb);
+
+	--bs-input-bg-color: var(--white);
+	--bs-input-bg-color-rgb: var(--white-rgb);
+
+	--bs-element-bg-color: var(--white);
+	--bs-element-bg-color-rgb: var(--white-rgb);
+
+	/* Non bootstrap color variables */
+
+	--table-row-hover-bg-color: var(--soft-gray);
+	--table-row-hover-bg-color-rgb: var(--soft-gray-rgb);
+}
+
+:root, [data-bs-theme=light] .progress-bar {
+	--bs-progress-bar-color: var(--white);
+	--bs-progress-bar-bg: var(--royal-blue);
+}

package/dist/styles/constants/theme-print.scss

@@ -0,0 +1,206 @@
+@page print-portrait {
+	size: portrait;
+}
+@media print {
+	@page {
+		size: A4 landscape;
+		margin: 2cm 1cm 1.5cm;
+	}
+
+	.print-portrait {
+		page: print-portrait;
+	}
+
+	// Dont display page scrollbar in chrome
+	::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* Needed for background color of status indicator widget */
+	html {
+		-webkit-print-color-adjust: exact;
+	}
+
+	// Needed for Chrome, so that background is always white
+	[data-bs-theme=dark] {
+		color-scheme: light;
+	}
+
+	body {
+		position: relative !important;
+		height: auto;
+		background: none !important;
+
+		--bs-primary: var(--royal-blue);
+		--bs-primary-rgb: var(--royal-blue-rgb);
+
+		--bs-secondary: var(--lavender-mist);
+		--bs-secondary-rgb: var(--lavender-mist-rgb);
+
+		--bs-light: var(--polar-mist);
+		--bs-light-rgb: var(--polar-mist-rgb);
+
+		--bs-dark: var(--deep-space-blue);
+		--bs-dark-rgb: var(--deep-space-blue-rgb);
+
+		--bs-link-color: var(--royal-blue);
+		--bs-link-color-rgb: var(--royal-blue-rgb);
+
+		--bs-link-hover-color: var(--royal-blue);
+		--bs-link-hover-color-rgb: var(--royal-blue-rgb);
+
+		--bs-code-color: var(--teal);
+		--bs-code-color-rgb: var(--teal-rgb);
+
+		--bs-body-bg: var(--polar-mist);
+		--bs-body-bg-rgb: var(--polar-mist-rgb);
+
+		--bs-body-color: var(--black);
+		--bs-body-color-rgb: var(--black-rgb);
+
+		--bs-border-color: var(--lavender-mist);
+		--bs-border-color-rgb: var(--lavender-mist-rgb);
+
+		--bs-input-bg-color: var(--white);
+		--bs-input-bg-color-rgb: var(--white-rgb);
+
+		--bs-element-bg-color: var(--white);
+		--bs-element-bg-color-rgb: var(--white-rgb);
+
+		--bs-table-color: var(--bs-dark);
+
+		--table-row-hover-bg-color: var(--soft-gray);
+		--table-row-hover-bg-color-rgb: var(--soft-gray-rgb);
+
+		&.print-portrait {
+			width: 900px;
+		}
+	}
+
+	#app {
+		height: 100%;
+		overflow: visible;
+		display: block;
+	}
+
+	button, .btn-sm, .btn .btn-primary, .btn-primary {
+		display: none !important;
+	}
+
+	.card {
+		box-shadow: none !important;
+		border: 0 !important;
+		.card-header {
+			background-color: var(--white);
+			&.print-card-header {
+				min-height: auto;
+				.flex-fill {
+					height: auto;
+				}
+			}
+
+			i:not(.text-warning) {
+				display: none !important;
+			}
+			h3 {
+				font-size: 32px !important;
+			}
+		}
+		.card-body {
+			color: inherit !important;
+		}
+		.card-footer, .card-footer-flex, .input-group {
+			display: none !important;
+		}
+	}
+
+	.datatable2 {
+		margin-bottom: 0;
+		table-layout: auto;
+		td, th {
+			font-size: 12px;
+			padding: .25rem;
+		}
+		td {
+			white-space: normal;
+			& > * {
+				white-space: normal;
+			}
+		}
+		tr {
+			page-break-inside: avoid;
+		}
+		tfoot {
+			display: none;
+		}
+	}
+
+	.text-muted {
+		color: var(--bs-gray-700) !important;
+	}
+
+	.container {
+		max-width: 100% !important;
+	}
+
+	.progress-bar {
+		display: none !important;
+	}
+
+	table, .table {
+		--bs-table-color: var(--bs-dark);
+	}
+
+	.react-grid-item {
+		.recharts-tooltip-wrapper {
+			display: none !important;
+		}
+		.table-widget, .value-widget {
+			display: contents !important;
+		}
+	}
+
+
+	.reports-container {
+		padding-top: 0 !important;
+		.react-grid-layout {
+			height: unset !important;
+			display: table;
+			text-align: center;
+			.react-grid-item {
+				display: inline-block;
+				position: unset !important;
+				transform: unset !important;
+				text-align: initial;
+			}
+		}
+	}
+
+	.dashboard-container {
+		&.display-print {
+			.react-grid-layout {
+				position: static !important;
+				height: initial !important;
+				.react-grid-item {
+					display: block !important; /*avoid widgets breaking on transition between pages*/
+					margin: 0 auto 20px;
+					position: static !important;
+
+					height: initial !important; /* Alternatively, set "height: initial !important;" */
+					width: initial !important; /* Alternatively, set "width: initial !important;" */
+
+					break-inside: avoid;
+					page-break-inside: avoid; /*avoid widgets breaking on transition between pages*/
+				}
+			}
+			.recharts-responsive-container {
+				.recharts-wrapper {
+					width: 100% !important;
+					.recharts-surface, .recharts-legend-wrapper {
+						width: 100% !important;
+					}
+				}
+			}
+		}
+	}
+}

package/dist/styles/index.scss

@@ -0,0 +1,15 @@
+// This is the styling entry point
+
+@use './constants';
+
+@use './components/html';
+@use './components/card';
+@use './components/alert';
+@use './components/button.scss';
+@use './components/form';
+
+// Import default bootstrap styles
+@import 'bootstrap/dist/css/bootstrap.min.css';
+
+// Bootstrap icons import
+@import 'bootstrap-icons/font/bootstrap-icons.min.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asab_webui_shell",
-  "version": "25.1.13",
+  "version": "25.2.1-alpha.2",
   "license": "BSD-3-Clause",
   "description": "TeskaLabs ASAB WebUI Shell Application",
   "contributors": [