From a8c3cc2dd959fe3d9cd002bd38b8f584f02bf30a Mon Sep 17 00:00:00 2001
From: Felix Koch <felixkoch.it@gmail.com>
Date: Mon, 4 Dec 2023 20:27:33 +0100
Subject: [PATCH] add .outline-fix class for .btn-group

This class replaces bootstraps default strategy of using negative margins to hide double borders with specific css-selectors that hide and show specific borders.
---
 .../staff_evaluation_textanswers_section.html |  2 +-
 .../static/scss/components/_button-group.scss | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/evap/staff/templates/staff_evaluation_textanswers_section.html b/evap/staff/templates/staff_evaluation_textanswers_section.html
index cb410bba18..4fbaf63ef8 100644
--- a/evap/staff/templates/staff_evaluation_textanswers_section.html
+++ b/evap/staff/templates/staff_evaluation_textanswers_section.html
@@ -35,7 +35,7 @@
 
                                     <input type="hidden" name="answer_id" value="{{ answer.id }}" />
 
-                                    <div class="btn-group btn-group-sm" role="group">
+                                    <div class="btn-group btn-group-sm outline-fix" role="group">
                                         <input type="radio" class="btn-check" name="action" value="publish" id="{{ answer.id }}-radio-publish" autocomplete="off" {% if answer.will_be_public %}checked{% endif %}>
                                         <label class="btn btn-outline-primary" for="{{ answer.id }}-radio-publish">{% trans 'Publish' %}</label>
 
diff --git a/evap/static/scss/components/_button-group.scss b/evap/static/scss/components/_button-group.scss
index ee07369b75..678b0629d4 100644
--- a/evap/static/scss/components/_button-group.scss
+++ b/evap/static/scss/components/_button-group.scss
@@ -17,3 +17,25 @@ div.vote-inputs > textarea {
 div.vote-inputs label.choice-error {
     border-color: $evap-red;
 }
+
+// Change .btn-group outlined border style to fix double borders with outlined button style
+// see https://github.com/twbs/bootstrap/issues/25888
+.btn-group.outline-fix {
+
+    // If .btn is not the last element in the group, remove the right border.
+    // Also uses :has to not remove the right border if the next element is a disabled input
+    .btn:not(:last-child):not(.dropdown-toggle):has(+ :not(.btn-check[disabled])), .btn-group:not(:last-child) > .btn {
+        border-right: 0;
+    }
+
+    // Explicitly disable the left border of disabled .btn's to use the right border of the previous button.
+    .btn-check[disabled] + .btn {
+        border-left: 0;
+    }
+
+    // Revert Bootstrap (Prevent double borders when buttons are next to each other)
+    > :not(.btn-check:first-child) + .btn,
+    > .btn-group:not(:first-child) {
+        margin-left: unset;
+    }
+}
\ No newline at end of file