From ccb3b34de715fc83852a8e92984adb8764e95c3a Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Tue, 19 Jul 2022 12:31:42 +0200
Subject: [PATCH 1/2] prevent board selector item labels to overflow

---
 .../src/browser/boards/boards-toolbar-item.tsx       | 12 ++++++++----
 .../src/browser/style/boards-config-dialog.css       |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx b/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
index a86545ab9..a1ddb7749 100644
--- a/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
+++ b/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
@@ -130,11 +130,14 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
             protocolIcon
           )}
         />
-        <div className="arduino-boards-dropdown-item--label">
-          <div className="arduino-boards-dropdown-item--board-label">
+        <div
+          className="arduino-boards-dropdown-item--label"
+          title={`${boardLabel}\n${port.address}`}
+        >
+          <div className="arduino-boards-dropdown-item--board-label noWrapInfo noselect">
             {boardLabel}
           </div>
-          <div className="arduino-boards-dropdown-item--port-label">
+          <div className="arduino-boards-dropdown-item--port-label noWrapInfo noselect">
             {port.address}
           </div>
         </div>
@@ -229,7 +232,8 @@ export class BoardsToolBarItem extends React.Component<
           <div
             className={classNames(
               'arduino-boards-toolbar-item--label',
-              'noWrapInfo noselect',
+              'noWrapInfo',
+              'noselect',
               { 'arduino-boards-toolbar-item--label-connected': isConnected }
             )}
           >
diff --git a/arduino-ide-extension/src/browser/style/boards-config-dialog.css b/arduino-ide-extension/src/browser/style/boards-config-dialog.css
index 369b3ef45..b4a577ab1 100644
--- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css
+++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css
@@ -226,6 +226,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 }
 
 .arduino-boards-dropdown-item--label {
+  overflow: hidden;
   flex: 1;
 }
 

From 17c143014699f48b92b0000a739365666ab337ef Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Fri, 29 Jul 2022 12:08:02 +0200
Subject: [PATCH 2/2] make board selector show ellipsis when the board name is
 too long

---
 .../src/browser/style/boards-config-dialog.css                 | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/arduino-ide-extension/src/browser/style/boards-config-dialog.css b/arduino-ide-extension/src/browser/style/boards-config-dialog.css
index b4a577ab1..4c250bcd1 100644
--- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css
+++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css
@@ -180,9 +180,6 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 }
 
 .arduino-boards-toolbar-item--label {
-  height: 100%;
-  display: flex;
-  align-items: center;
   width: 100%;
 }