Merge pull request #928 from OneZoom/button-rounded-corners

Don't let content overlap rounded corners #924
OneZoom · Dec 9, 2024 · 2059c37 · 2059c37
2 parents 35d92a7 + 240c10f
commit 2059c37
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/OZprivate/scss/tree.scss b/OZprivate/scss/tree.scss
@@ -105,6 +105,7 @@ body.loading #UI #loading_spinner {
 .ui-controls {
     border: 1px solid $oz_border_def;
     border-radius: 5px; 
+    overflow: hidden; /* icons shouldn't sprawl over our corners */
     background-color: white;
     margin-top: 0.5em;
 

diff --git a/OZprivate/scss/ui_widgets.scss b/OZprivate/scss/ui_widgets.scss
@@ -77,6 +77,7 @@ progress[value] {
   color: $oz_border_def;
   border: 1px solid $oz_border_def;
   border-radius: 5px;
+  overflow: hidden;  /* Don't let content overflow borders */
 }
 
 .uk-navbar-dropdown-nav>li>a {

diff --git a/views/treeviewer/UI_layer.load b/views/treeviewer/UI_layer.load
@@ -20,7 +20,7 @@
       <a uk-tooltip="pos: right" title="{{=T('Settings')}}" onclick="$('.uk-tooltip.uk-active').hide()" uk-icon="icon: settings"></a>
     </div>
   </li>
-    <form id="settingsDropdown" class="uk-navbar-dropdown" uk-dropdown="pos: right-bottom; mode: click; offset: 3;">
+    <form id="settingsDropdown" class="uk-navbar-dropdown" uk-dropdown="container:#UI; pos: right-bottom; mode: click; offset: 3;">
       <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-left">
         <li class="uk-nav-header">{{=T('Information')}}</li>
         <li><a href="#howuse-modal" uk-toggle><span uk-icon="icon: expand"></span>{{=T('How to use')}}</a></li>
@@ -155,7 +155,7 @@ advSchbx='<li class="searchbox uk-search uk-search-default"><div><div class="sea
       <div class='icon-container'>
         <a class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.5" cy="9.5" r="9"/><path d="m 9.5,3.5 -1.5,6 1.5,6 1.5,-6 z" fill="none" stroke="#000" stroke-linejoin="miter" stroke-miterlimit="8" transform="rotate(40 9.5 9.5)"/><path d="m 9.5,3.5 -1.5,6 3,0 z" fill="#000" transform="rotate(40 9.5 9.5)"/><path fill="none" stroke="#000" stroke-linecap="round" d="M 9.5,0.5 9.5,2"/><path fill="none" stroke="#000" stroke-linecap="round" d="m 9.5,17 0,1.5"/><path fill="none" stroke="#000" stroke-linecap="round" d="M 0.5,9.5 2,9.5"/><path fill="none" stroke="#000" stroke-linecap="round" d="m 17,9.5 1.5,0"/></svg></a>
       </div><!-- inline-block: hide whitespace
-      --><div uk-dropdown="pos: right-bottom; delay-hide: 1000; boundary: .ui-controls; boundary-align: true" id="locationDropdown">
+      --><div uk-dropdown="container:#UI; pos: right-bottom; delay-hide: 1000; boundary: .ui-controls; boundary-align: true" id="locationDropdown">
           <ol class="location-list"></ol>
       </div><!-- inline-block: hide whitespace
       --><span class='button-label top-border top-right-radius top-padding'>{{=T('Location')}}</span><!-- inline-block: hide whitespace