feat: make git branch toggle button in git panel responsive

Author: devvaannsh

src/extensions/default/Git/src/Panel.js

@@ -1271,6 +1271,7 @@ define(function (require, exports) {
         const mainToolbarWidth = $mainToolbar.width();
         let overFlowWidth = 540;
         const breakpoints = [
+            { width: 600, className: "hide-when-medium" },
             { width: overFlowWidth, className: "hide-when-small" },
             { width: 400, className: "hide-when-x-small" }
         ];

src/extensions/default/Git/templates/git-panel.html

@@ -57,9 +57,9 @@
         </div>
         <!-- on right -->
         <div class="git-right-icons hide-when-small">
-            <div class="git-panel-branch btn small git-available">
+            <button type="button" class="git-panel-branch btn small git-available hide-when-medium">
                 <i class="fas fa-code-branch"></i><span class="git-branch-name"></span>
-            </div>
+            </button>
             <div class="btn-group git-available dropup">
                 <ul class="dropdown-menu git-remotes-dropdown"></ul>
                 <button type="button" class="git-remotes btn small dropdown-toggle" data-toggle="dropdown" title="{{S.TOOLTIP_PICK_REMOTE}}">