From 283b8e9bc802ff6b285232491dce14cfe7718797 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 24 Mar 2025 17:05:09 +0200
Subject: [PATCH] style(next)/floating buttons/backlink counter: fix the
 dropdown not showing up

---
 .../floating_buttons/floating_buttons.ts       | 16 ++++++++++++++++
 .../widgets/floating_buttons/zpetne_odkazy.ts  |  5 +++--
 src/public/stylesheets/theme-next/shell.css    | 18 ++++++++++++++----
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/public/app/widgets/floating_buttons/floating_buttons.ts b/src/public/app/widgets/floating_buttons/floating_buttons.ts
index 6fa8727fe..c7bf9b343 100644
--- a/src/public/app/widgets/floating_buttons/floating_buttons.ts
+++ b/src/public/app/widgets/floating_buttons/floating_buttons.ts
@@ -3,6 +3,14 @@ import { t } from "../../services/i18n.js";
 import type FNote from "../../entities/fnote.js";
 import type BasicWidget from "../basic_widget.js";
 
+/*
+ * Note:
+ *
+ * For floating button widgets that require content to overflow, the has-overflow CSS class should
+ * be applied to the root element of the widget. Additionally, this root element may need to
+ * properly handle rounded corners, as defined by the --border-radius CSS variable.
+ */
+
 const TPL = `
 <div class="floating-buttons no-print">
     <style>
@@ -39,10 +47,18 @@ const TPL = `
             top: 70px;
         }
 
+        .type-canvas .floating-buttons-children > * {
+            --border-radius: 0; /* Overridden by themes */
+        }
+
         .floating-buttons-children > *:not(.hidden-int):not(.no-content-hidden) {
             margin: 2px;
         }
 
+        .floating-buttons-children > *:not(.has-overflow) {
+            overflow: hidden;
+        }
+
         .floating-buttons-children > button, .floating-buttons-children .floating-button {
             font-size: 150%;
             padding: 5px 10px 4px 10px;
diff --git a/src/public/app/widgets/floating_buttons/zpetne_odkazy.ts b/src/public/app/widgets/floating_buttons/zpetne_odkazy.ts
index 2d95b38e8..2de19c5fe 100644
--- a/src/public/app/widgets/floating_buttons/zpetne_odkazy.ts
+++ b/src/public/app/widgets/floating_buttons/zpetne_odkazy.ts
@@ -10,7 +10,7 @@ import froca from "../../services/froca.js";
 import type FNote from "../../entities/fnote.js";
 
 const TPL = `
-<div class="backlinks-widget">
+<div class="backlinks-widget has-overflow">
     <style>
         .backlinks-widget {
             position: relative;
@@ -121,7 +121,8 @@ export default class BacklinksWidget extends NoteContextAwareWidget {
     }
 
     toggle(show: boolean) {
-        this.$widget.toggleClass("hidden-no-content", !show);
+        this.$widget.toggleClass("hidden-no-content", !show)
+                    .toggleClass("visible", !!show);
     }
 
     clearItems() {
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index fe85afdc5..b7d4563e5 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1305,7 +1305,6 @@ div.promoted-attribute-cell .multiplicity:has(span) {
  /* Floating buttons container */
 div#center-pane .floating-buttons-children {
     opacity: 1;
-    overflow: hidden;
     transform-origin: right;
     box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
     background: var(--floating-button-background-color);
@@ -1325,6 +1324,10 @@ div#center-pane .floating-buttons-children {
 
 /* Floating buttons */
 
+.floating-buttons-children {
+    --border-radius-size: 6px;
+}
+
 .floating-buttons-children > * {
     margin: 0 !important;
 }
@@ -1352,6 +1355,12 @@ div.floating-buttons-children .floating-button:active {
     font-size: calc(var(--floating-button-icon-size) * 0.85);
 }
 
+/* The first visible floating button */
+div.floating-buttons-children > *:nth-child(1 of .visible) {
+    --border-radius: var(--border-radius-size) 0 0 var(--border-radius-size);
+    border-radius: var(--border-radius);
+}
+
  /* "Show / hide floating buttons" buttons */
 
  @keyframes floating-buttons-show-hide-button-animation {
@@ -1409,8 +1418,9 @@ div.floating-buttons-children:not(.temporarily-hidden) .close-floating-buttons-b
     animation: floating-buttons-show-hide-button-animation 400ms ease-out;
 }
 
-div.floating-buttons-children .close-floating-buttons-button {
-    border-radius: 0;
+div.floating-buttons-children .close-floating-buttons {
+    border-radius: 0 var(--border-radius-size) var(--border-radius-size) 0;
+    overflow: hidden;
 }
 
 div.floating-buttons-children .close-floating-buttons {
@@ -1434,7 +1444,7 @@ div.floating-buttons-children .close-floating-buttons:has(.close-floating-button
     user-select: none;
 }
 
-.floating-buttons .backlinks-ticker:has(.backlinks-count:hover) {
+.floating-buttons .backlinks-widget:hover {
     background: var(--floating-button-hover-background);
 }