Last item's <select> must be visible.

Closes #1387

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

Author: Akos Kitta

Diff for: arduino-ide-extension/src/browser/widgets/component-list/component-list-item.tsx

@@ -32,7 +32,7 @@ export class ComponentListItem<
     const { item, itemRenderer } = this.props;
     return (
       <div
-        onMouseEnter={() => this.setState({ focus: true })}
+        onMouseOver={() => this.setState({ focus: true })}
         onMouseLeave={() => this.setState({ focus: false })}
       >
         {itemRenderer.renderItem(

Diff for: arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx

@@ -1,3 +1,4 @@
+import 'react-virtualized/styles.css';
 import * as React from '@theia/core/shared/react';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import {
@@ -59,7 +60,7 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
           this.mostRecentWidth = width;
           return (
             <List
-              className={'items-container'}
+              className="items-container"
               rowRenderer={this.createItem}
               height={height}
               width={width}
@@ -88,7 +89,7 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
     }
   }
 
-  private setListRef = (ref: List | null): void => {
+  private readonly setListRef = (ref: List | null): void => {
     this.list = ref || undefined;
   };
 
@@ -106,14 +107,21 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
   private clear(index: number): void {
     this.cache.clear(index, 0);
     this.list?.recomputeRowHeights(index);
-    // Update the last item if the if the one before was updated
-    if (index === this.props.items.length - 2) {
-      this.cache.clear(index + 1, 0);
-      this.list?.recomputeRowHeights(index + 1);
+    // The last item need extra space height for the footer on hover.
+    if (index === this.props.items.length - 1) {
+      this.list?.recomputeGridSize();
+      // Scroll to the very end if the last item has the :hover, so that footer will be visible.
+      const endPosition = this.list?.getOffsetForRow({
+        index,
+        alignment: 'end',
+      });
+      if (endPosition) {
+        this.list?.scrollToPosition(endPosition);
+      }
     }
   }
 
-  private createItem: ListRowRenderer = ({
+  private readonly createItem: ListRowRenderer = ({
     index,
     parent,
     key,