ui: made feed description responsive #56

azimut · Sep 17, 2024 · 1ff90c4 · 1ff90c4
1 parent 4cb9c05
commit 1ff90c4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -131,12 +131,22 @@
 
       .feed-details {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: center;
+        align-items: center; /* for the "..." */
+        padding: 0 0.4em;
       }
       .feed-details img {
-        max-width: 30%;
         object-fit: contain;
+        width: 100%; /* needed with align-items above */
+      }
+      @media (min-width: 1200px) {
+        .feed-details {
+          flex-direction: row;
+        }
+        .feed-details img {
+          max-width: 30%;
+        }
       }
       .feed-bio {
         font-size: 1.4em;

diff --git a/frontend/src/Main.elm b/frontend/src/Main.elm
@@ -495,8 +495,10 @@ viewEntry feedId now { title, date, url, id, isShowingDetails, content } =
 viewHeader : String -> Html Msg
 viewHeader search =
     header []
-        [ text "news"
-        , span [ class "pod" ] [ text "pod" ]
+        [ div []
+            [ text "news"
+            , span [ class "pod" ] [ text "pod" ]
+            ]
         , form [ onSubmit AskForSearch ]
             [ input
                 [ type_ "search"