From 564862e173deca47647674eae7554cc3bcde24e9 Mon Sep 17 00:00:00 2001 From: Alberto Iannaccone Date: Tue, 2 Aug 2022 11:11:38 +0200 Subject: [PATCH] Prevent board selector item labels to overflow (#1216) * prevent board selector item labels to overflow * make board selector show ellipsis when the board name is too long --- .../src/browser/boards/boards-toolbar-item.tsx | 12 ++++++++---- .../src/browser/style/boards-config-dialog.css | 4 +--- 2 files changed, 9 insertions(+), 7 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 a86545ab..a1ddb774 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 { protocolIcon )} /> -
-
+
+
{boardLabel}
-
+
{port.address}
@@ -229,7 +232,8 @@ export class BoardsToolBarItem extends React.Component<
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 da8333f5..61a9c5b3 100644 --- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css +++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css @@ -181,9 +181,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%; } @@ -227,6 +224,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i { } .arduino-boards-dropdown-item--label { + overflow: hidden; flex: 1; }