Search results show tiny scrollbar on the title of each result

[demyte]

I checked that...

• ... the documentation does not mention anything about my problem
• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... there are no open or closed issues that are related to my problem

Description

When I use the search box the results titles show a scroll bar on the right end of each as per:

This happens in Edge Chromium and Chrome (both stable channel)

It does not happen in Firefox

Expected behavior

Scroll bars do not show

Steps to reproduce the bug

1. Go to https://help.calumo.com/
2. Type test in the search box
3. See the image from the description for the issue.

Package versions

• Python: python --version >> Python 3.8.2
• MkDocs: mkdocs --version >> mkdocs, version 1.1 from c:\python38\lib\site-packages\mkdocs (Python 3.8)
• Material: pip show mkdocs-material | grep -E ^Version >> Version: 5.1.3

Project configuration

mkdocs.yml

# Copyright
copyright: "Copyright © 2020 CALUMO"

dev_addr: "127.0.0.1:8000"

docs_dir: "docs"

extra_css:
  - "stylesheets/extra.css"

extra_javascript:
  - "javascripts/extra.js"

google_analytics:
  - "###########"
  - "auto"

# Extensions
markdown_extensions:
  - admonition
  - codehilite:
      guess_lang: false
  - footnotes
  - meta
  - attr_list
  - pymdownx.arithmatex
  - pymdownx.betterem:
      smart_enable: all
  - pymdownx.caret
  - pymdownx.critic
  - pymdownx.details
  - pymdownx.inlinehilite
  - pymdownx.magiclink
  - pymdownx.mark
  - pymdownx.smartsymbols
  - pymdownx.superfences
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.tilde
  - smarty
  - toc:
      permalink: true

site_name: "CALUMO Documentation"

site_description: "The home of documentation for CALUMO"

site_dir: "site"

theme:
  name: "material"
  custom_dir: "theme-overrides/"
  favicon: "images/calumo-icon.png"
  logo: "images/calumo-logo.png"
  features:
    - tabs
  palette:
    primary: "indigo"
    accent: "indigo"
  extra:
    social:
      - type: "twitter"
        link: "https://twitter.com/calumo"
      - type: "linkedin"
        link: "https://www.linkedin.com/company/calumo"

use_directory_urls: true

extra.css

.md-main__inner {
  padding-top: 0rem;
}

/*
  Pulls the version release date up along side the version number
  so that it doesn't have to sit on the same line and cause anchor issues.
*/
.version_history_date {
  font-size: 0.75em;
  margin-top: -3.3em;
  float: right;
}

System information

• OS: Windows 10 2004
• Browser: Edge Chromium and Chrome fail (Firefox is ok)

[squidfunk]

Can't reproduce it on macOS, but I think I know what's causing it. Could you add extra CSS and verify if the following works?

.md-search-result__article {
  overflow: hidden;
}

[demyte]

@squidfunk Yep, that seems to have resolved it.

Thanks for the quick response.

[squidfunk]

Perfect. Just pushed 2cdddfc which includes the fix.

[squidfunk]

Released as part of 5.1.4