Merge pull request #283 from cheeaun/main

Update from main

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;

src/components/account-info.css

@@ -458,6 +458,7 @@
   main {
     margin-top: -8px;
     padding-top: 1px;
+    padding-bottom: 16px;
   }
 
   footer {

src/components/compose.jsx

@@ -392,7 +392,6 @@ function Compose({
         const hasModal = !!modals;
         const hasOnlyComposer =
           modals.length === 1 && modals[0].querySelector('#compose-container');
-        console.log('hasModal', hasModal, 'hasOnlyComposer', hasOnlyComposer);
         return hasModal && !hasOnlyComposer;
       },
     },

src/index.css

@@ -148,16 +148,6 @@ body {
   }
 }
 
-p {
-  /*
-    white-space is shorthand for two values; white-space-collapse and text-wrap
-    https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
-    !important is needed to override higher specificity when elements are styled
-    with `white-space` and 1 value, which doesn't have "pretty"
-  */
-  text-wrap: pretty !important;
-}
-
 a {
   color: var(--link-color);
   text-decoration-color: var(--link-faded-color);

src/pages/trending.css

@@ -108,10 +108,6 @@
       );
       transition: background-position-y 0.15s ease-out;
 
-      &:is(:hover, :focus-visible) {
-        background-position-y: -40px;
-      }
-
       figure {
         flex-grow: 1;
         margin: 0 0 -16px;
@@ -148,6 +144,10 @@
       }
     }
 
+    &:is(:hover, :focus-visible) article {
+      background-position-y: -40px;
+    }
+
     .article-body {
       padding: 0 8px 8px;
       line-height: 1.3;

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;