From 341b79814ec9eb9740705e935f653c358832ea67 Mon Sep 17 00:00:00 2001
From: tomasz1986 <twilczynski@naver.com>
Date: Thu, 27 Jul 2023 14:38:48 +0200
Subject: [PATCH] gui: Fix tooltips on buttons inside button groups (ref #7984)
 (#9008)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As per Bootstrap recommendation, buttons with tooltips inside button
groups require to have container: 'body' set. This prevents tooltips
from causing the buttons to jump on hover and also allows the tooltips
to be wider instead of wrapping on every space.

Ref: https://getbootstrap.com/docs/3.3/components/#btn-groups

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
---
 gui/default/assets/css/overrides.css                  | 7 -------
 gui/default/syncthing/device/editDeviceModalView.html | 8 ++++----
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index 865aa4168..6bce15004 100644
--- a/gui/default/assets/css/overrides.css
+++ b/gui/default/assets/css/overrides.css
@@ -574,13 +574,6 @@ html[lang|="ko"] i {
     font-style: normal;
 }
 
-/* Prevent buttons from jumping up and down
-   when a tooltip is shown for one of them. */
-.btn-group-vertical > .tooltip + .btn,
-.btn-group-vertical > .tooltip + .btn-group {
-    margin-top: -1px;
-}
-
 .select-on-click {
     -webkit-user-select: all;
     user-select: all;
diff --git a/gui/default/syncthing/device/editDeviceModalView.html b/gui/default/syncthing/device/editDeviceModalView.html
index 972d37684..8b436b86f 100644
--- a/gui/default/syncthing/device/editDeviceModalView.html
+++ b/gui/default/syncthing/device/editDeviceModalView.html
@@ -14,16 +14,16 @@
               <input ng-if="editingDeviceNew()" name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required="" valid-deviceid list="discovery-list" aria-required="true" />
               <div ng-if="!editingDeviceNew()" class="well well-sm form-control text-monospace" style="height: auto;" select-on-click>{{currentDevice.deviceID}}</div>
               <div id="shareDeviceIdButtons" class="input-group-btn">
-                <button type="button" class="btn btn-default" ng-click="copyToClipboard($event, currentDevice.deviceID)" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Copy' | translate }}">
+                <button data-container="body" type="button" class="btn btn-default" ng-click="copyToClipboard($event, currentDevice.deviceID)" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Copy' | translate }}">
                   <span class="fa fa-lg fa-clone"></span>
                 </button>
-                <button type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('email')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by Email' | translate }}">
+                <button data-container="body" type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('email')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by Email' | translate }}">
                   <span class="fa fa-lg fa-envelope-o"></span>
                 </button>
-                <button type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('sms')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by SMS' | translate }}">
+                <button data-container="body" type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('sms')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by SMS' | translate }}">
                   <span class="fa fa-lg fa-comments-o"></span>
                 </button>
-                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Show QR' | translate }}">
+                <button data-container="body" type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Show QR' | translate }}">
                   <span class="fa fa-lg fa-qrcode"></span>
                 </button>
               </div>