diff --git a/src/app.css b/src/app.css
index 0759b25d..e0d41fa0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2130,6 +2130,14 @@ ul.link-list li a .icon {
   align-items: center;
   transition: opacity 0.3s ease-out;
 
+  &.expandable:not(#columns &) {
+    @media (min-width: 40em) {
+      width: 95vw;
+      max-width: calc(320px * 3.3);
+      transform: translateX(calc(-50% + var(--main-width) / 2));
+    }
+  }
+
   &.loading,
   .loading > & {
     pointer-events: none;
diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx
index 891c25e8..dffd8310 100644
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@@ -120,7 +120,7 @@ function Trending({ columnMode, ...props }) {
     return (
       <>
         {!!hashtags.length && (
-          <div class="filter-bar">
+          <div class="filter-bar expandable">
             <Icon icon="chart" class="insignificant" size="l" />
             {hashtags.map((tag, i) => {
               const { name, history } = tag;