Open hoverstate dropbutton to overflow on border

patch still applies.

Looks like a Seven issue

@yvesvanlaer Thanks for submitting this bug report! The solution is correct, but the implementation can be more fool proof by removing css (!). The value for the border-radius doesn't actually matter as long as it is big, so it can be 1em or 20em; the display will be the same. For example, the base implementation for the dropbutton is:

.js .dropbutton-widget .dropbutton-action a {
  border-radius: 20em 0 0 20em;
  padding: 4px 1.5em;
  display: block;
  width: 100%;
}

The code that is causing the overflow was added to remove the corners from an open dropbutton. The same effect can be achieved by settings border-bottom-left-radius: 0;. This bypasses the value problem altogether. As a result, various places where a value is added can be removed.

@LewisNyman Views UI has the same problem and took a similar approach to fixing it, so this touches views CSS as well. From /modules/views_ui/css/views_ui.admin.theme.css:

.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
  border-radius: 1.1em 0 0 0; /* LTR */
}
[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
  border-radius: 0 1.1em 0 0;
}
.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
  border-radius: 0 0 0 1.1em; /* LTR */
}
[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
  border-radius: 0 0 1.1em 0;
}

@joginderpc Thanks for picking this up!

1. +++ b/core/themes/seven/css/components/dropbutton.component.css
   @@ -87,10 +87,13 @@
   -  border-radius: 20em 0 0 20em; /* LTR */
   +  border-radius: 1em 0 0 1em; /* LTR */
   

   This is the opposite of what I suggested in #4. Please have a look at #4 for the suggested approach.

2. +++ b/core/themes/seven/css/components/dropbutton.component.css
   @@ -87,10 +87,13 @@
   +  border-top: 1px solid #a6a6a6;
   +  border-left: 1px solid #a6a6a6;
   +  border-right: 1px solid #a6a6a6;
   

   Are these changes necessary? They seem out of scope for this issue.

check for next file.

Needs re-roll.

I try to make a re-roll but the console show --> fatal: unrecognized input.

Change status to need review for re-test

Let's try just re-uploading the patch for the bots.

adding patch for this

+++ b/core/themes/seven/css/components/dropbutton.component.css
@@ -319,3 +319,9 @@
+ .js .dropbutton-multiple.open .dropbutton-action:last-child:hover a  {
+    border-radius: 0px 0px 0px 1em;
+ }
\ No newline at end of file
 

I added a newline at end of file.

I have manually tested Seven without any patches applied and I can no longer replicate the issue.

See screenshot below of open dropbutton being hovered over...

Please feel free to reopen if you still find the issue.