Need to fix the Responsive View of the Mission Page's Filter and Clea…

…r Buttons. mbari-org#267 - This update solves various aspects of the Responsive View problem on desktop. Will need to re-address further when shifting to other media views (phone, ipads).

smdb/smdb/static/css/filters.css

@@ -210,7 +210,8 @@ div.row {
     width: 100%;
     height: 55px;
 }
-#submit_id_submit, .btn, .btn-primary {
+/* #submit_id_submit,  */
+.btn, .btn-primary {
     border: 1.75px solid;
     border-color: black;
     font: inherit;
@@ -251,16 +252,6 @@ box-sizing: content-box;
     flex-direction: row;
     width: 80%
 }
-.mb-0 
-#missionFilterSubmit {
-  margin-bottom: 0.5rem !important;
-  margin-top: 0.5rem !important;
-}
-#mission_detail_row {
-  position: relative;
-  padding-top: 100px;
-  padding-bottom: 35px;
-}
 #mission_detail_notes_row, h3 {
   position: relative;
   padding-left: 5px;
@@ -269,18 +260,7 @@ box-sizing: content-box;
 #mission_notes_txt {
   font-size: 1.5rem;
 }
-.mb-0 
-#expeditionFilterSubmit {
-  margin-bottom: 0.5rem !important;
-  margin-top: 0.5rem !important;
-}
-.col-md
-#expeditionFilterSubmit,
-#expeditionFilterCancel,
-#compilationFilterSubmit,
-#compilationFilterCancel {
-  width: 100px;
-}
+#mission_detail_row,
 #expedition_detail_row,
 #compilation_detail_row {
   width: 100%;
@@ -289,16 +269,46 @@ box-sizing: content-box;
   padding-bottom: 25px;
 }
 .mb-0 
+#missionFilterSubmit,
+#missionFilterCancel,
+#expeditionFilterSubmit,
+#expeditionFilterCancel,
 #compilationFilterSubmit,
 #compilationFilterCancel {
   margin-bottom: 1rem !important;
   margin-top: 0rem !important;
 }
-#compilation_detail_row {
-  position: relative;
-  padding-top: 100px;
-  padding-bottom: 25px;
-}
+.col-md
+#expeditionFilterSubmit,
+#expeditionFilterCancel,
+#compilationFilterSubmit,
+#compilationFilterCancel {
+  width: 100px;
+  display: flex;
+  flex-direction: column !important;
+  flex-grow: 1;
+  flex-basis: 100%;
+  flex: 1;
+}
+@media (min-width: 625px) {
+    .missionRow {
+        -ms-flex-direction: row;
+        flex-direction: row !important;
+        position: absolute;
+        align-items:left;
+        width: 100%;
+        line-height: fit-content;
+        z-index: 700;
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+/* .missionRow {
+  display: grid;
+  grid-template-columns: 6fr 3fr;
+  overflow: hidden;
+  width: 900px;
+} */
 form#searchBarForm {
     top: 0px;
     position: relative;