Metabase: Download Button Overlap Bug In Embedded Reports

Introduction

Hey everyone! Today, we're diving into a quirky little bug in Metabase that some of you might have encountered. Specifically, it's about the download button doing a bit of an awkward overlap with the table headers when you've embedded a Metabase report and disabled the title. This can be a real head-scratcher, especially when you're trying to create a seamless and user-friendly experience for your users. Let's break down the issue, see how to reproduce it, and talk about what we'd expect to happen instead. So, grab your favorite beverage, and let's get started!

Describe the Bug

So, here's the deal: we've got an iframe embed for Metabase (specifically, version v1.56.2.2). Now, in version 1.55, the download button decided to play hide-and-seek and went missing. But that's not all! We also noticed that when titles are disabled (which we prefer), hovering over the table makes the download button overlap with the table headers. It's like a UI collision we didn't sign up for! We were really hoping that this pull request would fix it, but after upgrading, the problem is still there.

Take a look at the screenshots below to get a clearer picture of what's happening:

When we enable the header (which, honestly, we don't want to), the alignment gets better. However, the download option becomes less discoverable. Users aren't naturally going to hover over the iframe to find it, especially since they were used to seeing the download option pinned to the bottom of the table. It's all about that user experience, right?

Here's how it looked before all this started:

To Reproduce

Want to see this in action for yourself? Here’s how you can reproduce the bug:

1. Go to an embedded report via a static iframe without headers.
2. Notice that the download button doesn't appear right away.
3. Hover your mouse over the table.
4. Voilà! You'll see the download button overlapping with the header. Not ideal, right?

Expected Behavior

What we really want is for the download button for embedded reports to be disabled at all times unless a user hovers over the table. And even then, it definitely shouldn't overlap with the header when titles are disabled. A clean, non-overlapping UI is the goal here!

Logs

Unfortunately, there are no logs available for this particular issue. It seems to be purely a front-end visual bug.

Information About Your Metabase Installation

Here's some info about our Metabase setup:

{
  "browser-info": {
    "language": "en",
    "platform": "Win32",
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36",
    "vendor": "Google Inc."
  },
  "metabase-info": {
    "databases": [
      "postgres",
      "h2"
    ],
    "run-mode": "prod",
    "plan-alias": "enterprise-self-hosted",
    "version": {
      "date": "2025-08-13",
      "tag": "v1.56.2.2",
      "hash": "9baacec"
    },
    "settings": {
      "report-timezone": null
    },
    "hosting-env": "unknown",
    "application-database": "postgres",
    "application-database-details": {
      "database": {
        "name": "PostgreSQL",
        "version": "17.5 (Ubuntu 17.5-1.pgdg22.04+1)"
      },
      "jdbc-driver": {
        "name": "PostgreSQL JDBC Driver",
        "version": "42.7.7"
      }
    }
  },
  "system-info": {
    "file.encoding": "UTF-8",
    "java.runtime.name": "OpenJDK Runtime Environment",
    "java.runtime.version": "21.0.8+9-Ubuntu-0ubuntu122.04.1",
    "java.vendor": "Ubuntu",
    "java.vendor.url": "https://ubuntu.com/",
    "java.version": "21.0.8",
    "java.vm.name": "OpenJDK 64-Bit Server VM",
    "java.vm.version": "21.0.8+9-Ubuntu-0ubuntu122.04.1",
    "os.name": "Linux",
    "os.version": "6.8.0-1029-gcp",
    "user.language": "en",
    "user.timezone": "Etc/UTC"
  }
}

Severity

We consider this a high severity issue because it's blocking our upgrade. A clunky UI can really impact user adoption and overall satisfaction.

Additional Context

No response

Conclusion

So, there you have it – the Metabase download button overlap bug. It's a small issue, but it can be quite annoying when you're aiming for a polished, professional look in your embedded reports. Hopefully, this detailed explanation and reproduction guide will help the Metabase team squash this bug soon. And remember, folks, keep an eye out for these little quirks and report them – it's all part of making software better for everyone! Stay tuned for more insights, and happy Metabase-ing! We need a fix for this ASAP! It is important to keep the UI clean and easy to use. Thanks for reading!