Notification beta filter drop-down auto completion is overlapping

[jetersen]

The new notifications (beta) needs some styling it's almost perfect

however js-notification-search-autocomplete-dropdown card-filter-autocomplete-dropdown could use some extra margin-top.

it got a margin-top: 4px!important; from mt-1 margins.scss:12

The full div class js-notification-search-autocomplete-dropdown card-filter-autocomplete-dropdown bg-white boxed-group-list border boxed-group-standalone rounded-1 mt-1 position-absolute overflow-auto bg-white hide-sm

Here are the computed values for the js-notification-search-autocomplete-dropdown card-filter-autocomplete-dropdow element:

background-color:rgb(24, 24, 24);
border-bottom-color:rgb(52, 52, 52);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-bottom-style:solid;
border-bottom-width:0.994318px;
border-image-outset:0px;
border-image-repeat:stretch;
border-image-slice:100%;
border-image-source:none;
border-image-width:1;
border-left-color:rgb(52, 52, 52);
border-left-style:solid;
border-left-width:0.994318px;
border-right-color:rgb(52, 52, 52);
border-right-style:solid;
border-right-width:0.994318px;
border-top-color:rgb(52, 52, 52);
border-top-left-radius:3px;
border-top-right-radius:3px;
border-top-style:solid;
border-top-width:0.994318px;
box-sizing:border-box;
color:rgb(190, 190, 190);
cursor:pointer;
display:block;
float:none;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size:14px;
height:183.764px;
line-height:21px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-bottom:-10px;
margin-left:0px;
margin-right:0px;
margin-top:4px;
max-height:240px;
min-width:240px;
overflow-wrap:break-word;
overflow-x:auto;
overflow-y:auto;
position:absolute;
tab-size:4;
text-size-adjust:100%;
width:249.446px;
z-index:500;
500.card-filter-autocomplete-dropdown

here is the HTML block with one of the outer elements.

<div class="d-flex flex-items-center mt-0 mb-md-3 mb-0 px-2 px-sm-0">
            <div class="BtnGroup mr-3 d-none d-md-block flex-shrink-0">
              <a class="btn BtnGroup-item " href="/notifications/beta?query=">All</a>
              <a class="btn BtnGroup-item selected" href="/notifications/beta?query=is%3Aunread">Unread</a>
            </div>

        <div class="d-none d-md-block col-12 col-sm-6">

<!-- '"` --><!-- </textarea></xmp> --><form class="flex-auto js-active-navigation-container js-navigation-container js-notification-search-form ml-0 subnav-search" role="search" data-pjax="true" action="/notifications/beta?query=is%3Aunread" accept-charset="UTF-8" method="get" _lpchecked="1"><input name="utf8" type="hidden" value="✓">
  <input type="text" name="query" value="is:unread " class="form-control subnav-search-input width-full subnav-search-input-wide input-contrast js-navigation-enable js-notification-search-input" placeholder="Filter notifications" aria-label="Filter notifications" autocomplete="off" data-suggested-repositories-path="/notifications/beta/suggestions/repositories" data-suggestable-qualifiers="[{&quot;value&quot;:&quot;repo:&quot;,&quot;description&quot;:&quot;filter by repository&quot;},{&quot;value&quot;:&quot;is:&quot;,&quot;description&quot;:&quot;filter by discussion type&quot;},{&quot;value&quot;:&quot;reason:&quot;,&quot;description&quot;:&quot;filter by notification reason&quot;}]" data-suggestable-reasons="[{&quot;value&quot;:&quot;assign&quot;},{&quot;value&quot;:&quot;author&quot;},{&quot;value&quot;:&quot;comment&quot;},{&quot;value&quot;:&quot;invitation&quot;},{&quot;value&quot;:&quot;manual&quot;},{&quot;value&quot;:&quot;mention&quot;},{&quot;value&quot;:&quot;review-requested&quot;},{&quot;value&quot;:&quot;security-alert&quot;},{&quot;value&quot;:&quot;state-change&quot;},{&quot;value&quot;:&quot;subscribed&quot;},{&quot;value&quot;:&quot;team-mention&quot;},{&quot;value&quot;:&quot;ci-activity&quot;}]" data-suggestable-types="[{&quot;value&quot;:&quot;check-suite&quot;},{&quot;value&quot;:&quot;commit&quot;},{&quot;value&quot;:&quot;gist&quot;},{&quot;value&quot;:&quot;issue&quot;},{&quot;value&quot;:&quot;pr&quot;},{&quot;value&quot;:&quot;pull-request&quot;},{&quot;value&quot;:&quot;release&quot;},{&quot;value&quot;:&quot;repository-invitation&quot;},{&quot;value&quot;:&quot;repository-vulnerability-alert&quot;},{&quot;value&quot;:&quot;repository-advisory&quot;},{&quot;value&quot;:&quot;team-discussion&quot;}]">
  <svg class="octicon octicon-settings subnav-search-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 7H3V2h1v5zm-1 7h1v-3H3v3zm5 0h1V8H8v6zm5 0h1v-2h-1v2zm1-12h-1v6h1V2zM9 2H8v2h1V2zM5 8H2c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1zm5-3H7c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1zm5 4h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1z"></path></svg>

  <div class="js-notification-search-autocomplete-dropdown card-filter-autocomplete-dropdown bg-white boxed-group-list border boxed-group-standalone rounded-1 mt-1 position-absolute overflow-auto bg-white hide-sm" style="
    /* margin-top: 38px!important; */
">
    <div class="px-2 py-1">
      <div class="js-notification-search-autocomplete-results"><!---->
      <div>

    <div class="border-bottom-0 rounded-1 py-1 px-2 mx-0 mb-1 js-navigation-item navigation-focus" data-search="true" aria-selected="true">
      <span class="text-bold"><!---->is:unread<!----></span> - submit
    </div>

    <h6 class="width-full text-normal border-bottom bg-white text-gray py-2 mb-2">
      Available filters
    </h6>

        <!---->
        <div class="border-bottom-0 rounded-1 py-1 px-2 mx-0 mb-1 js-navigation-item" data-value="repo:">
          <span class="text-bold"><!---->repo:<!----></span> filter by repository
        </div>
      <!---->
        <div class="border-bottom-0 rounded-1 py-1 px-2 mx-0 mb-1 js-navigation-item" data-value="is:">
          <span class="text-bold"><!---->is:<!----></span> filter by discussion type
        </div>
      <!---->
        <div class="border-bottom-0 rounded-1 py-1 px-2 mx-0 mb-1 js-navigation-item" data-value="reason:">
          <span class="text-bold"><!---->reason:<!----></span> filter by notification reason
        </div>
      <!---->
      </div>
    <!----></div>
    </div>
  </div>
</form>
        </div>

  <div style="margin-left:auto; margin-top:-1px; margin-bottom:-1px" class="text-small text-right d-none d-md-flex">
    <div class="js-notifications-beta-tag-enrolled">
      Notifications   <span class="border rounded-1 px-1 border-green text-small text-gray-dark">Beta</span>
<br>
      <button type="button" class="btn-link" data-feature-preview-trigger-url="/users/casz/feature_previews?selected_slug=notifications_v2" data-feature-preview-close-details="{&quot;event_type&quot;:&quot;feature_preview.clicks.close_modal&quot;,&quot;payload&quot;:{&quot;client_id&quot;:&quot;1078412514.1535359810&quot;,&quot;originating_request_id&quot;:&quot;16B4:34443:BDC348:11B8B03:5E1EC439&quot;,&quot;originating_url&quot;:&quot;https://github.com/notifications/beta?query=is%3Aunread&quot;,&quot;referrer&quot;:null,&quot;user_id&quot;:1661688}}" data-feature-preview-close-hmac="c1b5a2d9e6f7907703ae646230eace2f5feb74796751c678aa7b8152b3acb380" data-hydro-click="{&quot;event_type&quot;:&quot;feature_preview.clicks.open_modal&quot;,&quot;payload&quot;:{&quot;link_location&quot;:&quot;notifications&quot;,&quot;client_id&quot;:&quot;1078412514.1535359810&quot;,&quot;originating_request_id&quot;:&quot;16B4:34443:BDC348:11B8B03:5E1EC439&quot;,&quot;originating_url&quot;:&quot;https://github.com/notifications/beta?query=is%3Aunread&quot;,&quot;referrer&quot;:null,&quot;user_id&quot;:1661688}}" data-hydro-click-hmac="6a84f28a1061094179bbddc2113ffc33be658bad2b252584dd788ce1a5f9bace">
        Opt-out
      </button>
      or
      <a target="_blank" href="https://support.github.com/contact/feedback?contact[subject]=Product+feedback&amp;contact[category]=notifications">give us feedback</a>
    </div>

    <div class="js-notifications-beta-tag-unenrolled" hidden="">
      Enjoying Notifications   <span class="border rounded-1 px-1 border-green text-small text-gray-dark">Beta</span>
 ?<br>
      <button type="button" class="btn-link" data-feature-preview-trigger-url="/users/casz/feature_previews?selected_slug=notifications_v2" data-feature-preview-close-details="{&quot;event_type&quot;:&quot;feature_preview.clicks.close_modal&quot;,&quot;payload&quot;:{&quot;client_id&quot;:&quot;1078412514.1535359810&quot;,&quot;originating_request_id&quot;:&quot;16B4:34443:BDC348:11B8B03:5E1EC439&quot;,&quot;originating_url&quot;:&quot;https://github.com/notifications/beta?query=is%3Aunread&quot;,&quot;referrer&quot;:null,&quot;user_id&quot;:1661688}}" data-feature-preview-close-hmac="c1b5a2d9e6f7907703ae646230eace2f5feb74796751c678aa7b8152b3acb380" data-hydro-click="{&quot;event_type&quot;:&quot;feature_preview.clicks.open_modal&quot;,&quot;payload&quot;:{&quot;link_location&quot;:&quot;notifications&quot;,&quot;client_id&quot;:&quot;1078412514.1535359810&quot;,&quot;originating_request_id&quot;:&quot;16B4:34443:BDC348:11B8B03:5E1EC439&quot;,&quot;originating_url&quot;:&quot;https://github.com/notifications/beta?query=is%3Aunread&quot;,&quot;referrer&quot;:null,&quot;user_id&quot;:1661688}}" data-hydro-click-hmac="6a84f28a1061094179bbddc2113ffc33be658bad2b252584dd788ce1a5f9bace">
        Make it your default
      </button>
    </div>
  </div>

      </div>

• Browser: N/A
• Operating System: N/A
• Link to page with the issue: https://github.com/notifications/beta?query=is%3Aunread
• Screenshot:

Before After

[the-j0k3r]

Thanks for report @casz, though I cant duplicate the issue reported, perhaps because its a beta feature and I see no way to enroll.

Perhaps someone else knows or can dupe and fix whatever the issue is.

[jetersen]

I'll see if I can fix it :)

[jetersen]

Closing as this is actually related to styles from Refined GitHub

[the-j0k3r]

We do try to support Refined GitHub but none of us afaik use Refined GitHub.

What are the rules being generated from Refined GitHub that point to this? Please get for us and paste in a reply with all applicable rules including all properties especially colors ;) TIA

Im unsure what could be causing the issue, if this is a Refined GitHub issue beyond what we can do with CSS here, or if we can support this somehow.

@silverwind ping for feedback pls. =)

[jetersen]

Already fixed https://github.com/sindresorhus/refined-github/pull/2706

[the-j0k3r]

I see, thx =)

[silverwind]

Our generator already pulls in some color-related styles from RGH. I'd prefer not to mess with layout like margin in our style, it's supposed to be (mostly) about colors.

[the-j0k3r]

Its fixed anyway upstream =)