Show Longer Branch Name in Web UI's "More ..." View

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Support for git submodules in package manager-aware setting (#305)
+- Web UI's 'More ...' view shows longer branch names (#294)
 - Deletion of files in locked environment is now suppressed (#302)
 
 ## [2.3.0] - 2023-12-06

git-webui/release/share/git-webui/webui/css/git-webui.css

@@ -265,7 +265,7 @@ body {
   border: none;
 }
 .modal .card-header {
-  padding: 1% 2% 0% 14%;
+  padding: 0;
   background-color: #fff;
   color: inherit !important;
   border: none !important;
@@ -277,6 +277,10 @@ body {
   padding-bottom: 1%;
   margin: 0%;
   border: none !important;
+  overflow: visible;
+}
+.modal .modal-content {
+  min-width: fit-content;
 }
 #main-view {
   display: flex;

git-webui/release/share/git-webui/webui/js/git-webui.js

@@ -362,7 +362,7 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                 var itemId = refname + idPostfix;
                 var cardHeader = $('<div class="card-header" id="heading-' + itemId +'">').appendTo(cardDiv);
                 var button = $('<button class="btn btn-sm btn-default btn-branch text-left" type="button" data-toggle="collapse" data-target="#collapse-' + itemId + '" aria-expanded="true" aria-controls="collapse-' + itemId + '">'
-                                + ref //IMPORTANT: This has to be the original ref for selectRef to work 
+                            + ref //IMPORTANT: This has to be the original ref for selectRef to work 
                             + '</button>').appendTo(cardHeader)
 
                 var collapseDiv = $('<div id="collapse-' + itemId + '" class="collapse" aria-labelledby="heading-' + itemId + '" data-parent="#accordion-'+id+'-'+idPostfix+'">').appendTo(cardDiv);
@@ -377,6 +377,16 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                 self.selectRef(event.target.innerHTML);
             });
         }
+
+        if (id === "remote-branches" && idPostfix === "popup") {
+            const remoteBranchBtns = $("#accordion-remote-branches-popup button").filter((i, span) => jQuery.inArray($(span).text(),refs) != -1);
+            const widest = Math.max(...remoteBranchBtns.map((i, span) => $(span).width()));
+            if (remoteBranchBtns.length > 0) {
+                remoteBranchBtns.css("padding", ".25rem .5rem");
+                remoteBranchBtns.css("border", 0);
+                remoteBranchBtns.width(widest);
+            }
+        } 
         return accordionDiv;
     }
 

git-webui/src/share/git-webui/webui/css/git-webui.less

@@ -361,7 +361,7 @@ body {
 
 .modal {
     .card-header {
-        padding: 1% 2% 0% 14%;
+        padding: 0;
         background-color: #fff;
         color: inherit !important;
         border:none !important;
@@ -372,6 +372,10 @@ body {
         padding-bottom:1%;
         margin: 0%;
         border: none !important;
+        overflow: visible;
+    }
+    .modal-content {
+        min-width: fit-content;
     }
 }
 

git-webui/src/share/git-webui/webui/js/git-webui.js

@@ -362,7 +362,7 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                 var itemId = refname + idPostfix;
                 var cardHeader = $('<div class="card-header" id="heading-' + itemId +'">').appendTo(cardDiv);
                 var button = $('<button class="btn btn-sm btn-default btn-branch text-left" type="button" data-toggle="collapse" data-target="#collapse-' + itemId + '" aria-expanded="true" aria-controls="collapse-' + itemId + '">'
-                                + ref //IMPORTANT: This has to be the original ref for selectRef to work 
+                            + ref //IMPORTANT: This has to be the original ref for selectRef to work 
                             + '</button>').appendTo(cardHeader)
 
                 var collapseDiv = $('<div id="collapse-' + itemId + '" class="collapse" aria-labelledby="heading-' + itemId + '" data-parent="#accordion-'+id+'-'+idPostfix+'">').appendTo(cardDiv);
@@ -377,6 +377,16 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                 self.selectRef(event.target.innerHTML);
             });
         }
+
+        if (id === "remote-branches" && idPostfix === "popup") {
+            const remoteBranchBtns = $("#accordion-remote-branches-popup button").filter((i, span) => jQuery.inArray($(span).text(),refs) != -1);
+            const widest = Math.max(...remoteBranchBtns.map((i, span) => $(span).width()));
+            if (remoteBranchBtns.length > 0) {
+                remoteBranchBtns.css("padding", ".25rem .5rem");
+                remoteBranchBtns.css("border", 0);
+                remoteBranchBtns.width(widest);
+            }
+        } 
         return accordionDiv;
     }