Worked on displaying the quickSelect correctly

client/src/main/java/envoy/client/ui/control/QuickSelectControl.java

@@ -1,9 +1,9 @@
 package envoy.client.ui.control;
 
-import javafx.geometry.Pos;
+import javafx.geometry.*;
 import javafx.scene.control.*;
 import javafx.scene.image.ImageView;
-import javafx.scene.layout.VBox;
+import javafx.scene.layout.*;
 import javafx.scene.shape.Rectangle;
 
 import envoy.client.ui.controller.GroupCreationTab;
@@ -17,19 +17,19 @@ import envoy.data.User;
 public class QuickSelectControl extends VBox {
 
 	public QuickSelectControl(User user, GroupCreationTab tab) {
-		Button removeBtn = new Button();
-		removeBtn.setPrefSize(10, 10);
-		removeBtn.setMaxSize(10, 10);
-		removeBtn.setMinSize(10, 10);
-		removeBtn.setAlignment(Pos.TOP_RIGHT);
-		removeBtn.setOnMouseClicked(evt -> {
-			tab.removeFromQuickSelection(this);
-		});
-		removeBtn.setId("remove-button");
-		getChildren().add(removeBtn);
+		setPrefWidth(37);
+		setMaxWidth(37);
+		setMinWidth(37);
+		var stackPane = new StackPane();
+		stackPane.setAlignment(Pos.TOP_CENTER);
 
 		// Profile picture
-		ImageView	contactProfilePic	= new ImageView(IconUtil.loadIconThemeSensitive("user_icon", 32));
+		var picHold = new VBox();
+		picHold.setPadding(new Insets(2, 0, 0, 0));
+		picHold.setPrefHeight(35);
+		picHold.setMaxHeight(35);
+		picHold.setMinHeight(35);
+		var			contactProfilePic	= new ImageView(IconUtil.loadIconThemeSensitive("user_icon", 32));
 		final var	clip				= new Rectangle();
 		clip.setWidth(32);
 		clip.setHeight(32);
@@ -37,14 +37,35 @@ public class QuickSelectControl extends VBox {
 		clip.setArcWidth(32);
 		contactProfilePic.setClip(clip);
 		setAlignment(Pos.TOP_CENTER);
-		getChildren().add(contactProfilePic);
+		picHold.getChildren().add(contactProfilePic);
+		stackPane.getChildren().add(picHold);
 
-		Label nameLabel = new Label();
+		var hBox = new HBox();
+		hBox.setPrefHeight(12);
+		hBox.setMaxHeight(12);
+		hBox.setMinHeight(12);
+		var region = new Region();
+		hBox.getChildren().add(region);
+		hBox.setHgrow(region, Priority.ALWAYS);
+
+		var removeBtn = new Button();
+		removeBtn.setPrefSize(12, 12);
+		removeBtn.setMaxSize(12, 12);
+		removeBtn.setMinSize(12, 12);
+		removeBtn.setOnMouseClicked(evt -> tab.removeFromQuickSelection(this));
+		removeBtn.setId("remove-button");
+		hBox.getChildren().add(removeBtn);
+		stackPane.getChildren().add(hBox);
+		getChildren().add(stackPane);
+
+
+		var nameLabel = new Label();
 		nameLabel.setPrefSize(35, 20);
 		nameLabel.setMaxSize(35, 20);
 		nameLabel.setMinSize(35, 20);
 		nameLabel.setText(user.getName());
 		nameLabel.setAlignment(Pos.TOP_CENTER);
+		nameLabel.setPadding(new Insets(0, 5, 0, 0));
 		getChildren().add(nameLabel);
 
 		getStyleClass().add("quick-select");

client/src/main/java/envoy/client/ui/controller/GroupCreationTab.java

@@ -81,6 +81,9 @@ public class GroupCreationTab implements EventListener {
 				.filter(not(localDB.getUser()::equals))
 				.map(User.class::cast)
 				.collect(Collectors.toList()));
+		quickSelectList.setPrefHeight(0);
+		quickSelectList.setMaxHeight(0);
+		quickSelectList.setMinHeight(0);
 	}
 
 	/**
@@ -92,6 +95,9 @@ public class GroupCreationTab implements EventListener {
 	private void userListClicked() {
 		createButton.setDisable(userList.getSelectionModel().isEmpty() || groupNameField.getText().isBlank());
 		quickSelectList.getItems().add(new QuickSelectControl(userList.getSelectionModel().getSelectedItem(), this));
+		quickSelectList.setPrefHeight(60);
+		quickSelectList.setMaxHeight(60);
+		quickSelectList.setMinHeight(60);
 	}
 
 	/**
@@ -157,7 +163,14 @@ public class GroupCreationTab implements EventListener {
 		return localDB.getChats().stream().map(Chat::getRecipient).filter(Group.class::isInstance).map(Contact::getName).anyMatch(newName::equals);
 	}
 
-	public void removeFromQuickSelection(QuickSelectControl element) { quickSelectList.getItems().remove(element); }
+	public void removeFromQuickSelection(QuickSelectControl element) {
+		quickSelectList.getItems().remove(element);
+		if (quickSelectList.getItems().size() == 0) {
+			quickSelectList.setPrefHeight(0);
+			quickSelectList.setMaxHeight(0);
+			quickSelectList.setMinHeight(0);
+		}
+	}
 
 	@FXML
 	private void backButtonClicked() {

client/src/main/resources/css/base.css

@@ -41,7 +41,7 @@
 	-fx-scale-y: 1.05;
 }
 
-.label {
+.label, .quick-select {
 	-fx-background-color: transparent;
 }
 
@@ -144,3 +144,15 @@
     visibility: hidden ;
     -fx-padding: -20.0 0.0 0.0 0.0;
 }
+
+#quick-select-list .scroll-bar:horizontal{
+	-fx-pref-height: 0;
+	-fx-max-height: 0;
+	-fx-min-height: 0; 
+}
+
+#quick-select-list .scroll-bar:vertical{
+	-fx-pref-width: 0;
+	-fx-max-width: 0;
+	-fx-min-width: 0; 
+}

client/src/main/resources/css/dark.css

@@ -18,7 +18,7 @@
 	-fx-background-color: lightgray;
 }
 
-#message-list, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content, .context-menu, .menu-item {
+#message-list, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content, .context-menu, .menu-item, #quick-select-list {
 	-fx-background-color: #222222;
 }
 
@@ -42,7 +42,7 @@
 	-fx-background-color: #191919;
 }
 
-#chat-list, #top-bar, #search-panel, #note-background, .quick-select {
+#chat-list, #top-bar, #search-panel, #note-background {
 	-fx-background-color: #303030;
 }
 
@@ -69,7 +69,7 @@
 	-fx-background-color: transparent;
 }
 
-.scroll-bar:vertical .increment-arrow, .scroll-bar:vertical .decrement-arrow, #quick-select-list, .list-cell {
+.scroll-bar:vertical .increment-arrow, .scroll-bar:vertical .decrement-arrow, .list-cell {
 	-fx-background-color: transparent;
 }
 

client/src/main/resources/fxml/GroupCreationTab.fxml

@@ -64,7 +64,7 @@
                <Insets bottom="5.0" top="5" />
             </VBox.margin>
          </Label>
-         <ListView fx:id="quickSelectList" Id="quick-select-list" orientation="HORIZONTAL" prefHeight="60.0" />
+         <ListView fx:id="quickSelectList" id="quick-select-list" orientation="HORIZONTAL" prefHeight="60.0" />
          <ListView id="chat-list" fx:id="userList" focusTraversable="false" onMouseClicked="#userListClicked" prefWidth="316.0" VBox.vgrow="ALWAYS">
             <contextMenu>
                <ContextMenu anchorLocation="CONTENT_TOP_LEFT" />