match tickets and common dashboard dropdown to talk dropdown

[Aqil-Ahmad]

the dropdown menu in the Common Dashboard and Tickets Dashboard had several inconsistencies. this pr fixes those and matches the dropdown in tickets and common to that of talk.

fixes #1367

Summary by Sourcery

Align dashboard and profile dropdown styling across control and presale interfaces to match the Talk dropdown.

Enhancements:

• Standardize popover container appearance (borders, radius, shadows, padding, arrow) for dropdown menus in both control and presale views.
• Unify typography, spacing, and icon sizing for profile and dashboard dropdown items and their submenus.
• Simplify and replace separator styling with consistent top borders for specific dropdown items to create clearer sectioning in the menus.

[sourcery-ai]

Reviewer's Guide

Aligns the Tickets and Common dashboard dropdown styling and structure with the Talk dropdown by introducing shared popover styling, normalizing spacing/typography/icon sizes, and standardizing separators and submenu behavior in both pretixcontrol and pretixpresale stylesheets.

Flow diagram for shared dropdown popover styling across dashboards

flowchart TD
  User["User clicks profile avatar"]
  TalkNavbar["Talk navbar dropdown trigger"]
  TicketsNavbar["Tickets navbar dropdown trigger"]
  CommonNavbar["Common dashboard navbar dropdown trigger"]

  SharedPopover["Shared popover base styles (.popover)"]
  SharedContent["Shared popover content styles (.popover-content)"]
  SharedProfileMenu["Shared profile-menu styles"]
  SharedSubmenu["Shared submenu and submenu-item styles"]

  User --> TalkNavbar
  User --> TicketsNavbar
  User --> CommonNavbar

  TalkNavbar --> SharedPopover
  TicketsNavbar --> SharedPopover
  CommonNavbar --> SharedPopover

  SharedPopover --> SharedContent
  SharedContent --> SharedProfileMenu
  SharedContent --> SharedSubmenu

  SharedProfileMenu --> HoverState["Consistent hover background and text color"]
  SharedProfileMenu --> Separators["Standardized separators and borders"]
  SharedProfileMenu --> Typography["Normalized font size, padding, line height"]
  SharedSubmenu --> SubmenuAppearance["Unified submenu spacing, icons, and hover"]

Loading

File-Level Changes

Change	Details	Files
Standardized popover container styling for dashboard dropdowns to match Talk	Added a global .popover rule to remove rounded corners and borders, apply a unified multi-layer box shadow, and reset padding Adjusted bottom-positioned popovers to sit closer to their trigger using a negative top margin Removed the default popover arrow by hiding the > .arrow element	app/eventyay/static/pretixcontrol/scss/main.scss app/eventyay/static/pretixpresale/scss/main.scss
Normalized profile menu item styling (spacing, typography, and separators) across dashboards	Reduced font size of profile menu entries and added consistent vertical/horizontal padding and line-height to match Talk Forced profile menu links to render as unstyled inline text links (no padding/border/background) for visual consistency Standardized icon spacing, widths, font sizes, and vertical alignment within profile menu items Replaced the old .separator element with hidden styles and instead added top borders to specific menu items (nth-child/admin/last-child) to visually group sections Tweaked minimum popover widths to match Talk’s dropdown width	app/eventyay/static/pretixcontrol/scss/main.scss app/eventyay/static/pretixpresale/scss/main.scss
Aligned dashboard and submenu item layout/spacing and removed legacy visual differences	Reduced dashboard-item font size and normalized icon sizing/spacings and line-height Adjusted #submenu positioning and dimensions, removed rounded corners/borders, and applied a consistent box shadow Standardized padding, font size, and line-height for submenu items and their icons, ensuring they match main menu items Ensured submenu links are visually unstyled (no extra padding/borders/background) and align with the new dropdown look	app/eventyay/static/pretixcontrol/scss/main.scss

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#1367	Make the Common Dashboard and Tickets Dashboard dropdown visually match the Talk Component dropdown, while keeping the existing blue color theme and ensuring icon visibility (consistent icon color/style with Talk public pages).	✅
#1367	Reduce vertical spacing/padding in the dropdown menus (Common Dashboard, Tickets Dashboard, Talk Component) so that menu item spacing matches the Talk Component style.	✅
#1367	Remove the triangle pointer from the dashboard dropdowns (and align popover container styling such as border, radius, shadow) to match the unified Talk dropdown design.	✅

Possibly linked issues

• Fix dropdown menu styling on Common Dashboard and Tickets Dashboard #1367: They are the same: PR restyles dashboard dropdowns (icons, spacing, removes arrow) to match Talk dropdown.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey there - I've reviewed your changes - here's some feedback:

• The new .popover styling is duplicated across pretixcontrol and pretixpresale SCSS; consider extracting a shared mixin or partial to keep the dropdown look consistent and easier to maintain.
• Using hard-coded :nth-child(6) / :nth-child(4) selectors for adding borders to specific .profile-menu entries is brittle; tying these styles to semantic classes (e.g., .primary-actions, .logout) would be more robust against DOM changes.
• There are many !important overrides added for padding, borders, and backgrounds in the dropdown; it may be worth revisiting selector specificity or restructuring the CSS so these can be reduced to avoid future override conflicts.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The new `.popover` styling is duplicated across `pretixcontrol` and `pretixpresale` SCSS; consider extracting a shared mixin or partial to keep the dropdown look consistent and easier to maintain.
- Using hard-coded `:nth-child(6)` / `:nth-child(4)` selectors for adding borders to specific `.profile-menu` entries is brittle; tying these styles to semantic classes (e.g., `.primary-actions`, `.logout`) would be more robust against DOM changes.
- There are many `!important` overrides added for padding, borders, and backgrounds in the dropdown; it may be worth revisiting selector specificity or restructuring the CSS so these can be reduced to avoid future override conflicts.

## Individual Comments

### Comment 1
<location> `app/eventyay/static/pretixcontrol/scss/main.scss:744-753` </location>
<code_context>
-    min-width: 200px;
+    padding: 0;
+    min-width: 192px;
     #submenu {
         position: absolute;
         top: 0;
-        right: 101%;
+        right: 100%;
         font-size: 16px;
         font-weight: normal;
         cursor: pointer;
         display: none;
-        min-width: 200px;
-        padding: 5px 0;
-        border-radius: 4px;
+        min-width: 224px;
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
         z-index: 9999;
         background-clip: padding-box;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+        border: none;
+        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
     }
     .profile-menu {
</code_context>

<issue_to_address>
**suggestion:** The submenu box-shadow and popover box-shadow are duplicated; consider centralizing this into a variable or mixin.

Since `.popover` and `#submenu` (and the presale stylesheet) now share this multi-layer shadow, extracting it into a shared variable or mixin (e.g. `$dropdown-shadow`) would keep elevation tweaks consistent and reduce duplication.

Suggested implementation:

```
        display: none !important;
    }
}

$dropdown-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

.popover-content {

```

```
        background-clip: padding-box;
        border: none;
        box-shadow: $dropdown-shadow;
    }

```

1. Search in this file for `.popover` or other dropdown/popover elements that currently use `box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);` and replace those with `box-shadow: $dropdown-shadow;` to fully deduplicate.
2. In the presale stylesheet (likely another SCSS file under `app/eventyay/static/`), replace the same multi-layer box-shadow with `$dropdown-shadow` as well. If that file is in a different build bundle, ensure it imports the file where `$dropdown-shadow` is defined or define the variable in a common imported partial.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: The submenu box-shadow and popover box-shadow are duplicated; consider centralizing this into a variable or mixin.

Since .popover and #submenu (and the presale stylesheet) now share this multi-layer shadow, extracting it into a shared variable or mixin (e.g. $dropdown-shadow) would keep elevation tweaks consistent and reduce duplication.

Suggested implementation:

        display: none !important;
    }
}

$dropdown-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

.popover-content {

        background-clip: padding-box;
        border: none;
        box-shadow: $dropdown-shadow;
    }

1. Search in this file for .popover or other dropdown/popover elements that currently use box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); and replace those with box-shadow: $dropdown-shadow; to fully deduplicate.
2. In the presale stylesheet (likely another SCSS file under app/eventyay/static/), replace the same multi-layer box-shadow with $dropdown-shadow as well. If that file is in a different build bundle, ensure it imports the file where $dropdown-shadow is defined or define the variable in a common imported partial.

[Aqil-Ahmad]

hi @mariobehling! could you please review my pr when you get a moment.

i've done most of the matching manually not sure if thats the ideal approach so i'd appreciate your thoughts on it.

[mariobehling]

Thanks, please start by addressing AI reviews.

[Copilot]

Pull request overview

This PR standardizes dropdown menu styling across the Common Dashboard, Tickets Dashboard, and Talk interfaces to create a consistent user experience. The changes update popover containers, menu items, and separator styling.

Key Changes:

• Unified popover container appearance with consistent borders, shadows, padding, and removed arrows
• Standardized typography (14px font, 1.5 line-height), spacing (7-8px/16px padding), and icon sizing (12px) across menu items
• Replaced separator elements with border-top styling on specific menu items

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 8 comments.

File	Description
app/eventyay/static/pretixpresale/scss/main.scss	Updated presale dropdown styling with new popover container styles, refined profile-menu spacing and typography, and replaced separators with border-top dividers
app/eventyay/static/pretixcontrol/scss/main.scss	Updated control interface dropdown styling with matching popover container styles, standardized profile-menu and dashboard-item spacing/typography, and refined submenu styling with consistent padding and icon sizes

Comments suppressed due to low confidence (1)

app/eventyay/static/pretixcontrol/scss/main.scss:988

• Duplicated submenu-item styles. The .submenu-item block at lines 923-952 and the one at lines 958-988 contain almost identical styling rules (a, i, and hover styles). This code duplication violates DRY principles and makes maintenance harder. Consider consolidating these into a single ruleset or using a mixin.

            .submenu-item {
                background-color: #fff;
                padding: 7px 16px;
                font-size: 12px;
                line-height: 1.5;

                a {
                    color: darken($btn-primary-bg, 10%) !important;
                    padding: 0 !important;
                    border: none !important;
                    background: none !important;
                    display: inline !important;
                    line-height: 1.5;
                }

                i {
                    margin-right: 7px;
                    width: 12px;
                    font-size: 12px;
                    vertical-align: middle;
                }

                &:hover {
                    background-color: darken($btn-primary-bg, 10%) !important;

                    a {
                        color: #fff !important;
                    }
                }
            }
        }
        &:hover {
            #submenu {
                display: block;

                .submenu-item {
                    background-color: #fff;
                    padding: 8px 16px;
                    font-size: 12px;
                    line-height: 1.5;

                    a {
                        color: darken($btn-primary-bg, 10%) !important;
                        padding: 0 !important;
                        border: none !important;
                        background: none !important;
                        display: inline !important;
                        line-height: 1.5;
                    }

                    i {
                        margin-right: 8px;
                        width: 12px;
                        font-size: 12px;
                        display: inline-block;
                        vertical-align: middle;
                    }

                    &:hover {
                        background-color: darken($btn-primary-bg, 10%) !important;

                        a {
                            color: #fff !important;
                        }
                    }
                }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Saksham-Sirohi]

Icons in the commons area navbar seem to be white for some reason, and no separators. Please fix that

[Aqil-Ahmad]

Icons in the commons area navbar seem to be white for some reason, and no separators. Please fix that

thanks for review @Saksham-Sirohi! i noticed this icons and text issue after merging enext. i still have conflicts which i'll properly resolve soon.

[sourcery-ai]

New security issues found

[sourcery-ai]

security (javascript.browser.security.insecure-document-method): User controlled data in methods like innerHTML, outerHTML or document.write is an anti-pattern that can lead to XSS vulnerabilities

Source: opengrep

[sourcery-ai]

security (javascript.browser.security.insecure-innerhtml): User controlled data in a hn.innerHTML is an anti-pattern that can lead to XSS vulnerabilities

Source: opengrep

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (2)

app/eventyay/static/pretixcontrol/js/ui/popover.js:80

• Both JavaScript files still contain elements with the separator class (lines 69 and 80 in pretixcontrol/popover.js, lines 75 and 89 in eventyay-common/popover.js). Since the CSS now hides elements with .separator class (via display: none), these elements serve no purpose and should be removed entirely for cleaner code.

                    <div class="profile-menu separator"></div>
                     <div class="profile-menu border-top">
                        <a href="${basePath}${accountPath}" target="_self" class="btn btn-outline-success">
                            <i class="fa fa-user-circle"></i> ${window.gettext('Account')}
                        </a>
                    </div>
                     <div class="profile-menu admin">
                        <a href="${basePath}${adminPath}" target="_self" class="btn btn-outline-success">
                            <i class="fa fa-cog"></i> ${window.gettext('Admin')}
                        </a>
                    </div>
                     <div class="profile-menu separator"></div>

app/eventyay/static/eventyay-common/js/ui/popover.js:89

• Both JavaScript files still contain elements with the separator class (lines 75 and 89). Since the CSS now hides elements with .separator class (via display: none), these elements serve no purpose and should be removed entirely for cleaner code.

            <div class="profile-menu separator"></div>

            <div class="profile-menu border-top">
                <a href="${basePath}${accountPath}" target="_self" class="btn btn-outline-success">
                    <i class="fa fa-user-circle"></i> ${window.gettext('Account')}
                </a>
            </div>

            <div class="profile-menu admin">
                <a href="${basePath}${adminPath}" target="_self" class="btn btn-outline-success">
                    <i class="fa fa-cog"></i> ${window.gettext('Admin')}
                </a>
            </div>

            <div class="profile-menu separator"></div>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[Copilot]

The submenu items at lines 960-993 duplicate the styling already defined at lines 921-954. This is redundant code - the submenu items don't need to be styled again within the &:hover block since they inherit the same styling from the parent #submenu definition. Consider removing this duplication to improve maintainability.

[Copilot]

Avoid automated semicolon insertion (97% of all statements in the enclosing script have an explicit semicolon).

[mariobehling]

Please rebase this PR.