web: fix progress bar on mobile

web/src/view/mod.rs

@@ -87,6 +87,7 @@ pub fn view(model: &Model) -> Node<Msg> {
     };
     div![
         C![
+            "relative",
             "flex",
             "flex-wrap-reverse",
             "bg-black",
@@ -94,14 +95,17 @@ pub fn view(model: &Model) -> Node<Msg> {
             "lg:flex-nowrap",
             "w-full"
         ],
+        reading_progress(model.read_completion_ratio),
         div![
             C!["w-full", "lg:w-48", "flex-none", "flex", "flex-col"],
             tags(model),
             versions(&model.versions)
         ],
-        reading_progress(model.read_completion_ratio),
         div![
-            C!["flex-auto", "flex", "flex-col"],
+            // TODO: This "overflow-hidden" is a hack because I can't figure out
+            // how to prevent the search input box on mobile for growing it's
+            // parent wider
+            C!["flex-auto", "flex", "flex-col", "overflow-hidden"],
             view_header(&model.query, &model.refreshing_state, true),
             content,
             view_header(&model.query, &model.refreshing_state, false),
@@ -871,7 +875,7 @@ fn view_header(
     };
     let query = Url::decode_uri_component(query).unwrap_or("".to_string());
     nav![
-        C!["flex", "px-4", "pt-4"],
+        C!["flex", "px-4", "pt-4", "overflow-hidden"],
         a![
             C![IF![is_error => "bg-red-500"], "rounded-r-none"],
             C![&tw_classes::BUTTON],