Improve the UI of the search page for small screens (mga#34432)

1 files changed, 40 insertions, 0 deletions

diff --git a/extensions/Mageia/web/style.css b/extensions/Mageia/web/style.css
index 65a0729a5..bff813ce5 100644
--- a/extensions/Mageia/web/style.css
+++ b/extensions/Mageia/web/style.css
@@ -144,8 +144,48 @@ ul#comment_tags_collapse_expand {
     display: inline;
 }
 
+#field_label_short_desc {
+    width: auto;
+}
+
+table.bz_simple_search_form {
+    width: 100%;
+}
+
+table.bz_simple_search_form th,
+.search_field_row .field_label {
+    width: 8em;
+}
+
+.bz_simple_search_form #content,
+.search_field_row .text_field,
+.search_field_row .keywords_field,
+#keywords_container {
+    width: 45%;
+    min-width: 20em;
+    max-width: 45em;
+}
+
+.bz_simple_search_form #content,
+.search_field_row .keywords_field {
+    width: 100%;
+}
+
 @media only screen and (max-width: 750px) {
 
+    #summary_field, .search_field_row {
+        white-space: wrap;
+    }
+
+    .search_field_row .field_label_sup {
+        white-space: nowrap;
+    }
+
+    .search_field_row .field_label, #field_label_short_desc {
+        display: block;
+        text-align: left;
+    }
+
     table.bz_buglist,
     .bz_buglist tbody,
     .bz_buglist tr,