Single dropbutton missing styling

I'll look into this isssue.

Hi @very_random_man,

I tried replicating the issue on my end, but I wasn't able to reproduce it. Could you please share more details about the issue, including the steps to replicate it? If possible, screenshots or any other relevant information would be very helpful.

Thanks!

Thanks for looking into it. These are the versions:

D10.3.14
Gin 4.0.6
Workbench Moderation 1.7.0

I have a moderation state of 'archived' where there is only one option to 'unarchive'. Below is the markup that is created for the drop button. I have left the theme debug in so you can see which templates are getting used.

<div class="gin-sticky-form-actions form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions--3">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'dropbutton_wrapper' -->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/dropbutton-wrapper.html.twig' -->
  <div class="dropbutton-wrapper dropbutton-single" data-drupal-ajax-container="" data-once="dropbutton">
  <div class="dropbutton-widget">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'links__dropbutton' -->
<!-- FILE NAME SUGGESTIONS:
   ✅ links--dropbutton.html.twig
   ✅ links--dropbutton.html.twig
   ▪️ links.html.twig
-->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'themes/contrib/gin/templates/form/links--dropbutton.html.twig' -->
<ul data-drupal-selector="edit-save" class="dropbutton dropbutton--single dropbutton--gin">
<li class="moderation-state-draft dropbutton__item dropbutton-action">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'input__submit' -->
<!-- FILE NAME SUGGESTIONS:
   ▪️ input--submit.html.twig
   ✅ input.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/claro/templates/form/input.html.twig' -->
<input form="node-section-lead-edit-form" type="submit" name="op" value="Save and Un-archive" class="button button--primary js-form-submit form-submit">
<!-- END OUTPUT from 'core/themes/claro/templates/form/input.html.twig' -->
</li>
</ul>
<!-- END CUSTOM TEMPLATE OUTPUT from 'themes/contrib/gin/templates/form/links--dropbutton.html.twig' -->
</div></div>
<!-- END OUTPUT from 'core/modules/system/templates/dropbutton-wrapper.html.twig' -->
</div>

I've added screenshots that show the default and hover state of the button with and without the fix I added in the issue description.

If you look in `styles/base/_dropdown.scss`, you'll see a few mentions of `dropbutton--multiple` but no mention of `dropbutton--single` so I'm guessing it just got overlooked as it's a bit of an edge case.

What i'd suggest is trying something along these lines, where you replace this bit:

  // Offset for select button on first item
  &--multiple > .dropbutton__item:first-of-type {
    height: 100%;
    margin-inline-end: var(--gin-spacing-xxl);
    border-inline-end: 1px solid var(--gin-color-primary-light-active);

    input {
      color: var(--gin-color-primary);
      height: 100%;
      background-color: transparent;
      border: 0 none !important;
      border-radius: 0 !important;
    }
  }

... with this ...

  // Offset for select button on first item
  > .dropbutton__item:first-of-type {
    height: 100%;

    input {
      color: var(--gin-color-primary);
      height: 100%;
      background-color: transparent;
      border: 0 none !important;
      border-radius: 0 !important;
    }
  }

  &--multiple > .dropbutton__item:first-of-type {
    margin-inline-end: var(--gin-spacing-xxl);
    border-inline-end: 1px solid var(--gin-color-primary-light-active);
  }

i.e. remove the &--multiple selector so it applies to any kind of dropbutton and move the bit specific to multiple dropbuttons into a separate section below. I've not tested this sass btw as I'm not set up for Gin development but i think it is probably a reasonable starting point. :-)