@theia/core 1.64.0-next.0 → 1.64.0-next.17

package/src/browser/hover-service.ts

@@ -71,6 +71,11 @@ export interface HoverRequest {
      * Function that takes the desired width and returns a HTMLElement to be rendered.
      */
     visualPreview?: (width: number) => HTMLElement | undefined;
+    /**
+     * Indicates if the hover contains interactive/clickable items.
+     * When true, the hover will register a click handler to allow interaction with elements in the hover area.
+     */
+    interactive?: boolean;
 }
 
 @injectable()
@@ -102,13 +107,11 @@ export class HoverService {
     protected readonly disposeOnHide = new DisposableCollection();
 
     requestHover(request: HoverRequest): void {
-        if (request.target !== this.hoverTarget) {
-            this.cancelHover();
-            this.pendingTimeout = disposableTimeout(() => this.renderHover(request), this.getHoverDelay());
-            this.hoverTarget = request.target;
-            this.listenForMouseOut();
-            this.listenForMouseClick();
-        }
+        this.cancelHover();
+        this.pendingTimeout = disposableTimeout(() => this.renderHover(request), this.getHoverDelay());
+        this.hoverTarget = request.target;
+        this.listenForMouseOut();
+        this.listenForMouseClick(request);
     }
 
     protected getHoverDelay(): number {
@@ -120,7 +123,7 @@ export class HoverService {
     protected async renderHover(request: HoverRequest): Promise<void> {
         const host = this.hoverHost;
         let firstChild: HTMLElement | undefined;
-        const { target, content, position, cssClasses } = request;
+        const { target, content, position, cssClasses, interactive } = request;
         if (cssClasses) {
             host.classList.add(...cssClasses);
         }
@@ -144,6 +147,17 @@ export class HoverService {
             host.showPopover();
         }
 
+        if (interactive) {
+            // Add a click handler to the hover host to ensure clicks within the hover area work properly
+            const clickHandler = (e: MouseEvent) => {
+                // Let click events within the hover area be processed by their handlers
+                // but prevent them from triggering document handlers that might dismiss the tooltip
+                e.stopImmediatePropagation();
+            };
+            host.addEventListener('click', clickHandler);
+            this.disposeOnHide.push({ dispose: () => host.removeEventListener('click', clickHandler) });
+        }
+
         if (request.visualPreview) {
             // If just a string is being rendered use the size of the outer box
             const width = firstChild ? firstChild.offsetWidth : this.hoverHost.offsetWidth;
@@ -224,12 +238,16 @@ export class HoverService {
     }
 
     /**
-     * Listen for any mouse click (mousedown) event and cancel the hover if detected.
-     * This ensures the hover is dismissed when the user clicks anywhere (including on the target or elsewhere).
+     * Listen for mouse click (mousedown) events and handle them based on hover interactivity.
+     * For non-interactive hovers, any mousedown cancels the hover immediately.
+     * For interactive hovers, the hover remains visible to allow interaction with its elements.
      */
-    protected listenForMouseClick(): void {
-        const handleMouseDown = (e: MouseEvent) => {
-            this.cancelHover();
+    protected listenForMouseClick(request: HoverRequest): void {
+        const handleMouseDown = (_e: MouseEvent) => {
+            const isInteractive = request.interactive;
+            if (!isInteractive) {
+                this.cancelHover();
+            }
         };
         document.addEventListener('mousedown', handleMouseDown, true);
         this.disposeOnHide.push({ dispose: () => document.removeEventListener('mousedown', handleMouseDown, true) });

package/src/browser/shell/tab-bar-toolbar/tab-toolbar-item.tsx

@@ -95,6 +95,10 @@ export class RenderedToolbarItemImpl extends AbstractToolbarItemImpl<RenderedToo
         if (action.onDidChange) {
             this.disposables.push(action.onDidChange(() => this.onDidChangeEmitter.fire()));
         }
+
+        this.disposables.push(Disposable.create(() =>
+            this.contextKeyListener?.dispose()
+        ));
     }
 
     dispose(): void {
@@ -102,6 +106,10 @@ export class RenderedToolbarItemImpl extends AbstractToolbarItemImpl<RenderedToo
     }
 
     updateContextKeyListener(when: string): void {
+        if (this.contextKeyListener) {
+            this.contextKeyListener.dispose();
+            this.contextKeyListener = undefined;
+        }
         const contextKeys = new Set<string>();
         this.contextKeyService.parseKeys(when)?.forEach(key => contextKeys.add(key));
         if (contextKeys.size > 0) {

package/src/browser/status-bar/status-bar.tsx

@@ -108,7 +108,7 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         </React.Fragment>;
     }
 
-    protected onclick(entry: StatusBarEntry): () => void {
+    protected triggerCommand(entry: StatusBarEntry): () => void {
         return () => {
             if (entry.command) {
                 const args = entry.arguments || [];
@@ -117,6 +117,15 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         };
     }
 
+    protected requestHover(e: React.MouseEvent<HTMLElement, MouseEvent>, entry: StatusBarEntry): void {
+        this.hoverService.requestHover({
+            content: entry.tooltip!,
+            target: e.currentTarget,
+            position: 'top',
+            interactive: entry.tooltip instanceof HTMLElement,
+        });
+    }
+
     protected createAttributes(viewEntry: StatusBarViewEntry): React.Attributes & React.HTMLAttributes<HTMLElement> {
         const attrs: React.Attributes & React.HTMLAttributes<HTMLElement> = {};
         const entry = viewEntry.entry;
@@ -126,9 +135,11 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
             attrs.className += ' hasCommand';
         }
         if (entry.command) {
-            attrs.onClick = this.onclick(entry);
+            attrs.onClick = this.triggerCommand(entry);
         } else if (entry.onclick) {
             attrs.onClick = e => entry.onclick?.(e.nativeEvent);
+        } else {
+            attrs.onClick = e => this.requestHover(e, entry);
         }
 
         if (viewEntry.compact && viewEntry.alignment !== undefined) {
@@ -136,11 +147,7 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         }
 
         if (entry.tooltip) {
-            attrs.onMouseEnter = e => this.hoverService.requestHover({
-                content: entry.tooltip!,
-                target: e.currentTarget,
-                position: 'top'
-            });
+            attrs.onMouseEnter = e => this.requestHover(e, entry);
         }
         if (entry.className) {
             attrs.className += ' ' + entry.className;

package/src/browser/style/alert-messages.css

@@ -16,13 +16,16 @@
 
 /* message container */
 .theia-alert-message-container {
-  flex: 1;
-  padding: 10px;
+  padding-block: calc(var(--theia-ui-padding) * 2);
+  padding-inline: calc(var(--theia-ui-padding) * 3) max(var(--theia-scrollbar-width), var(--theia-ui-padding));
+  flex-shrink: 0;
 }
 
-.theia-alert-message-container i {
-  transform: translateY(2px);
-  padding-right: 3px;
+.theia-alert-message-container .theia-message-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--theia-ui-padding);
 }
 
 .theia-alert-message-container .theia-message-header,
@@ -31,32 +34,32 @@
   overflow: hidden;
 }
 
+/* base alert message */
+.theia-alert {
+  display: grid;
+  gap: var(--theia-ui-padding);
+  border-radius: 4px;
+  padding: calc(var(--theia-ui-padding) * 2);
+  border: var(--theia-border-width) solid var(--theia-inputValidation-infoBorder);
+  line-height: 16px;
+}
+
 /* information message */
 .theia-info-alert {
   background-color: var(--theia-inputValidation-infoBackground);
-  border: var(--theia-border-width) solid
-    var(--theia-inputValidation-infoBorder);
-  border-radius: 4px;
   color: var(--theia-inputValidation-infoForeground);
-  padding: 10px;
 }
 
 /* warning message */
 .theia-warning-alert {
+  border-color: var(--theia-inputValidation-warningBorder);
   background-color: var(--theia-inputValidation-warningBackground);
-  border: var(--theia-border-width) solid
-    var(--theia-inputValidation-warningBorder);
-  border-radius: 4px;
   color: var(--theia-inputValidation-warningForeground);
-  padding: 10px;
 }
 
 /* error message */
 .theia-error-alert {
+  border-color: var(--theia-inputValidation-errorBorder);
   background-color: var(--theia-inputValidation-errorBackground);
-  border: var(--theia-border-width) solid
-    var(--theia-inputValidation-errorBorder);
-  border-radius: 4px;
   color: var(--theia-inputValidation-errorForeground);
-  padding: 10px;
 }

package/src/browser/style/breadcrumbs.css

@@ -49,7 +49,6 @@
   height: 100%;
   color: var(--theia-breadcrumb-foreground);
   outline: none;
-  padding: 0 0.3rem 0 0.25rem;
 }
 
 .theia-breadcrumbs .theia-breadcrumb-item:hover {
@@ -64,7 +63,7 @@
   align-items: center;
   width: 0.8em;
   text-align: right;
-  padding-left: 4px;
+  padding-inline: 3px 6px;
 }
 
 .theia-breadcrumbs .theia-breadcrumb-item::before {

package/src/browser/style/dialog.css

@@ -50,8 +50,9 @@
   font-size: var(--theia-ui-font-size1);
   background-color: var(--theia-statusBar-background);
   color: var(--theia-statusBar-foreground);
-  padding: 0 calc(var(--theia-ui-padding) * 2);
-  min-height: 24px;
+  padding-left: calc(var(--theia-ui-padding) * 2);
+  padding-right: var(--theia-ui-padding);
+  min-height: 30px;
 }
 
 .lm-Widget.dialogOverlay .dialogTitle i.closeButton {

package/src/browser/style/index.css

@@ -123,8 +123,10 @@ blockquote {
     font-family: var(--theia-ui-font-family);
     font-size: var(--theia-ui-font-size1);
     line-height: var(--theia-content-line-height);
-    padding-left: 5px;
+    padding: 3px 0 3px 8px;
     border-radius: 2px;
+    min-height: 28px;
+    box-sizing: border-box;
 }
 
 .theia-input[type="text"] {
@@ -248,7 +250,7 @@ blockquote {
 
 .action-label {
     padding: 2px;
-    border-radius: 5px;
+    border-radius: 4px;
     cursor: pointer;
 }
 
@@ -262,7 +264,7 @@ blockquote {
     min-width: 65px;
     outline: none;
     cursor: pointer;
-    padding: 4px 9px;
+    padding: 6px 9px;
     margin-left: calc(var(--theia-ui-padding) * 2);
     border-radius: 2px;
 }

package/src/browser/style/progress-bar.css

@@ -15,6 +15,9 @@
  ********************************************************************************/
 
 .theia-progress-bar-container {
+  position: absolute;
+  top: -2px;
+  left: 0;
   width: 100%;
   height: 2px;
 }

package/src/browser/style/select-component.css

@@ -43,10 +43,6 @@
   overflow: hidden;
 }
 
-.theia-select-component:focus {
-  outline-color: var(--theia-focusBorder);
-}
-
 .theia-select-component-dropdown {
   font-family: var(--theia-ui-font-family);
   font-size: var(--theia-ui-font-size1);
@@ -57,6 +53,7 @@
   user-select: none;
   overflow: auto;
   border-radius: 2px;
+  margin-top: 2px;
 }
 
 .theia-select-component-dropdown .theia-select-component-option {

package/src/browser/style/sidepanel.css

@@ -35,7 +35,6 @@
 .lm-TabBar.theia-app-sides {
   display: block;
   color: var(--theia-activityBar-inactiveForeground);
-  background: var(--theia-activityBar-background);
   font-size: var(--theia-ui-font-size1);
   min-width: var(--theia-private-sidebar-tab-width);
   max-width: var(--theia-private-sidebar-tab-width);
@@ -52,7 +51,6 @@
 
 .lm-TabBar.theia-app-sides .lm-TabBar-tab {
   position: relative;
-  background: var(--theia-activityBar-background);
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -146,6 +144,14 @@
   max-width: var(--theia-private-sidebar-tab-width);
 }
 
+#theia-left-content-panel.theia-mod-collapsed .theia-app-sidebar-container {
+  border-right: none;
+}
+
+#theia-right-content-panel.theia-mod-collapsed .theia-app-sidebar-container {
+  border-left: none;
+}
+
 #theia-left-content-panel > .lm-Panel {
   border-right: var(--theia-panel-border-width) solid
     var(--theia-activityBar-border);
@@ -326,13 +332,9 @@
 |----------------------------------------------------------------------------*/
 
 .theia-sidepanel-toolbar {
-  min-height: calc(
-    var(--theia-private-horizontal-tab-height) +
-      var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2
-  );
   display: flex;
-  padding-left: 5px;
   align-items: center;
+  min-height: var(--theia-horizontal-toolbar-height);
   background-color: var(--theia-sideBar-background);
   overflow: hidden;
 }
@@ -340,7 +342,7 @@
 .theia-sidepanel-toolbar .theia-sidepanel-title {
   color: var(--theia-settings-headerForeground);
   flex: 1;
-  margin-left: 14px;
+  margin-left: calc(var(--theia-ui-padding) * 3);
   text-transform: uppercase;
   font-size: var(--theia-ui-font-size0);
   min-width: 1rem;
@@ -350,12 +352,6 @@
   color: var(--theia-icon-foreground);
 }
 
-.theia-sidepanel-toolbar .lm-TabBar-toolbar .item > div {
-  height: 18px;
-  width: 18px;
-  background-repeat: no-repeat;
-}
-
 .noWrapInfo {
   white-space: nowrap;
   overflow: hidden;

package/src/browser/style/split-widget.css

@@ -25,6 +25,10 @@
   min-height: var(--theia-content-line-height);
 }
 
+.lm-SplitPanel-handle {
+  z-index: 6; /* Upper than the minimap */
+}
+
 .theia-split-widget > .lm-SplitPanel > .lm-SplitPanel-handle {
   box-sizing: border-box;
 }

package/src/browser/style/status-bar.css

@@ -37,60 +37,63 @@ body.theia-no-open-workspace #theia-statusBar {
   flex: 1;
   display: flex;
   align-items: stretch;
+  gap: var(--theia-ui-padding)
 }
 
 #theia-statusBar .area.left {
   justify-content: flex-start;
+  padding-left: var(--theia-ui-padding);
 }
 
 #theia-statusBar .area.right {
   justify-content: flex-end;
-  padding-right: calc(var(--theia-ui-padding) * 2);
+  padding-right: var(--theia-ui-padding);
 }
 
 #theia-statusBar .area .element {
   color: var(--theia-statusBar-foreground);
   display: flex;
   align-items: center;
+  justify-content: center;
   font-size: var(--theia-statusBar-font-size);
+  min-width: var(--theia-statusBar-height);
 }
 
 #theia-statusBar .area.left .element.has-background {
-  margin-left: 0px;
-  margin-right: 3px;
-  padding-left: 7px;
-  padding-right: 7px;
+  padding-inline: var(--theia-ui-padding);
 }
-#theia-statusBar .area .element>* {
-  margin-left: calc(var(--theia-ui-padding)/2);
+
+#theia-statusBar .area.left .element.has-background {
+  margin-left: calc(-1 * var(--theia-ui-padding));
 }
 
+/* Icons */
 #theia-statusBar .area .element .codicon {
   /* Scaling down codicons from 16 to 14 pixels */
   font-size: 14px;
+  margin: auto;
 }
 
-#theia-statusBar .area .element > *:last-child {
-  margin-right: calc(var(--theia-ui-padding) / 2);
+/* Icon with text */
+#theia-statusBar .area .element .codicon:has(+ span) {
+  margin-inline: calc(var(--theia-ui-padding) / 2);
 }
 
-.theia-mod-offline #theia-statusBar {
-  background-color: var(--theia-statusBar-offlineBackground) !important;
+/* Text labels */
+#theia-statusBar .area .element>span:not(.codicon) {
+  margin-inline: calc(var(--theia-ui-padding) / 2)
 }
 
-.theia-mod-offline #theia-statusBar .area .element {
-  color: var(--theia-statusBar-offlineForeground) !important;
+#theia-statusBar .area .element>span:not(.codicon):empty {
+  display: none;
 }
 
-#theia-statusBar .area.left .element:first-child:not(.has-background) {
-    margin-left: calc(var(--theia-ui-padding) * 3);
-}
-#theia-statusBar .area.left .element {
-  margin-right: var(--theia-ui-padding);
+.theia-mod-offline #theia-statusBar {
+  background-color: var(--theia-statusBar-offlineBackground) !important;
 }
 
-#theia-statusBar .area.right .element {
-  margin-left: var(--theia-ui-padding);
+.theia-mod-offline #theia-statusBar .area .element {
+  color: var(--theia-statusBar-offlineForeground) !important;
 }
 
 #theia-statusBar .area.right .element.compact-right,

package/src/browser/style/tabs.css

@@ -4,12 +4,12 @@
 
 :root {
   /* These need to be root because tabs get attached to the body during dragging. */
-  --theia-private-horizontal-tab-height: 28.5px;
+  --theia-private-horizontal-tab-height: 35px;
+  --theia-horizontal-toolbar-height: var(--theia-private-horizontal-tab-height);
   --theia-private-horizontal-tab-scrollbar-rail-height: 7px;
   --theia-private-horizontal-tab-scrollbar-height: 5px;
   --theia-tabbar-toolbar-z-index: 1001;
   --theia-toolbar-active-transform-scale: 1.272019649;
-  --theia-horizontal-toolbar-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
   --theia-dragover-tab-border-width: 2px;
 }
 
@@ -32,8 +32,8 @@
 .lm-TabBar[data-orientation="horizontal"] .lm-TabBar-tab {
   flex: none;
   height: var(--theia-horizontal-toolbar-height);
+  line-height: var(--theia-horizontal-toolbar-height);
   min-width: 35px;
-  line-height: var(--theia-private-horizontal-tab-height);
   padding: 0px 8px;
   align-items: center;
   overflow: hidden;
@@ -221,7 +221,6 @@
 .lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon,
 .lm-TabBar.theia-app-centers .lm-TabBar-tab.theia-mod-pinned>.lm-TabBar-tabCloseIcon {
   padding: 2px;
-  margin-top: 2px;
   margin-left: 4px;
   height: var(--theia-icon-size);
   width: var(--theia-icon-size);
@@ -328,7 +327,8 @@
 |----------------------------------------------------------------------------*/
 
 .lm-TabBar[data-orientation="horizontal"] .lm-TabBar-content-container>.ps__rail-x {
-  height: var(--theia-private-horizontal-tab-scrollbar-rail-height);
+  height: var(--theia-private-horizontal-tab-scrollbar-rail-height) !important;
+  background: transparent !important;
   z-index: 1000;
 }
 
@@ -384,9 +384,10 @@
   /* Due to the scrollbar (`z-index: 1000;`) it has a greater `z-index`. */
   display: flex;
   flex-direction: row-reverse;
-  padding: 4px;
-  padding-left: 0px;
-  margin-right: 4px;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--theia-ui-padding);
+  gap: 2px;
 }
 
 .lm-TabBar-content-container {
@@ -402,7 +403,7 @@
   display: flex;
   flex-direction: row;
   column-gap: 0px;
-  align-items: centery;
+  align-items: center;
 }
 
 .lm-TabBar-toolbar .item>div {
@@ -414,7 +415,7 @@
   cursor: pointer;
 }
 
-.lm-TabBar-toolbar :not(.item.enabled) .action-label {
+.lm-TabBar-toolbar > :not(.item.enabled) > .action-label {
   background: transparent;
   cursor: default;
 }
@@ -425,10 +426,10 @@
 }
 
 .lm-TabBar-toolbar .item>div {
-  line-height: calc(var(--theia-icon-size) + 2px);
-  height: calc(var(--theia-icon-size) + 2px);
+  min-width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
+  line-height: var(--theia-icon-size);
   background-repeat: no-repeat;
-  line-height: 18px;
 }
 
 .lm-TabBar-toolbar .item>div.no-icon {
@@ -492,6 +493,7 @@
 
 .lm-TabBar[data-orientation="horizontal"] .lm-TabBar-content {
   flex-direction: row;
+  min-height: var(--theia-horizontal-toolbar-height);
 }
 
 .lm-TabBar[data-orientation="vertical"] .lm-TabBar-content {

package/src/browser/style/tree.css

@@ -73,14 +73,16 @@
 .theia-TreeNodeContent {
   display: flex;
   align-items: center;
-  width: calc(100% - var(--theia-scrollbar-rail-width));
+  width: 100%;
+  padding-right: var(--theia-ui-padding);
+  box-sizing: border-box;
 }
 
 .theia-ExpansionToggle {
   display: flex;
   justify-content: center;
-  padding-left: calc(var(--theia-ui-padding) / 2);
-  padding-right: calc(var(--theia-ui-padding) / 2);
+  padding-left: calc(var(--theia-ui-padding) / 3);
+  padding-right: calc(var(--theia-ui-padding) / 3);
   min-width: var(--theia-icon-size);
   min-height: var(--theia-icon-size);
 }

package/src/browser/style/view-container.css

@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 :root {
-  --theia-view-container-title-height: var(--theia-content-line-height);
+  --theia-view-container-title-height: 24px;
   --theia-view-container-content-height: calc(100% - var(--theia-view-container-title-height));
 }
 
@@ -82,10 +82,6 @@
   box-shadow: none;
 }
 
-.theia-view-container-part-header .theia-ExpansionToggle {
-  padding-left: 4px;
-}
-
 .theia-view-container>.lm-SplitPanel[data-orientation="horizontal"] .part>.theia-header .theia-ExpansionToggle::before {
   display: none;
   padding-left: 0px;
@@ -114,7 +110,7 @@
 }
 
 .theia-view-container-part-header .notification-count-container {
-  margin-right: 12px;
+  margin-right: var(--theia-ui-padding);
 }
 
 .theia-view-container .part>.body {
@@ -156,7 +152,7 @@
 .lm-TabBar-toolbar.theia-view-container-part-title {
   overflow: visible !important;
   padding: 0px;
-  padding-right: calc(var(--theia-ui-padding) * 2 / 3);
+  padding-right: var(--theia-ui-padding);
 }
 
 .theia-view-container-part-title {

package/src/browser/tree/tree-widget.tsx

@@ -81,6 +81,8 @@ export interface TreeScrollEvent {
 export interface TreeScrollState {
     readonly scrollTop: number;
     readonly isAtBottom: boolean;
+    readonly scrollHeight?: number;
+    readonly clientHeight?: number;
 }
 
 export const TreeProps = Symbol('TreeProps');
@@ -1643,7 +1645,7 @@ export namespace TreeWidget {
     }
     export class View extends React.Component<ViewProps> {
         list: VirtuosoHandle | undefined;
-        private lastScrollState: TreeScrollState = { scrollTop: 0, isAtBottom: true };
+        private lastScrollState: TreeScrollState = { scrollTop: 0, isAtBottom: true, scrollHeight: 0, clientHeight: 0 };
 
         override render(): React.ReactNode {
             const { rows, width, height, scrollToRow, renderNodeRow, onScrollEmitter, ...other } = this.props;
@@ -1665,9 +1667,16 @@ export namespace TreeWidget {
                     const isAtBottom = scrollHeight - scrollTop - clientHeight <= SCROLL_BOTTOM_THRESHOLD;
 
                     // Store scroll state before firing the event to prevent jitter during inference and scrolling
-                    this.lastScrollState = { scrollTop, isAtBottom };
+                    this.lastScrollState = { scrollTop, isAtBottom, scrollHeight, clientHeight };
                     onScrollEmitter?.fire({ scrollTop, scrollLeft: e.target.scrollLeft || 0 });
                 }}
+                atBottomStateChange={(atBottom: boolean) => {
+                    this.lastScrollState = {
+                        ...this.lastScrollState,
+                        isAtBottom: atBottom
+                    };
+                }}
+                atBottomThreshold={SCROLL_BOTTOM_THRESHOLD}
                 totalCount={rows.length}
                 itemContent={index => renderNodeRow(rows[index])}
                 width={width}

package/src/browser/widgets/alert-message.tsx

@@ -43,9 +43,9 @@ export class AlertMessage extends React.Component<AlertMessageProps> {
 
     override render(): React.ReactNode {
         return <div className='theia-alert-message-container'>
-            <div className={`theia-${this.props.type.toLowerCase()}-alert`}>
+            <div className={`theia-alert theia-${this.props.type.toLowerCase()}-alert`}>
                 <div className='theia-message-header'>
-                    <i className={AlertMessageIcon[this.props.type]}></i>&nbsp;
+                    <i className={AlertMessageIcon[this.props.type]}></i>
                     {this.props.header}
                 </div>
                 <div className='theia-message-content'>{this.props.children}</div>