Partialy handle small screen on add issue

jirs-client/js/css/styledDateTimeInput.css

@@ -7,11 +7,19 @@
 .dateTimeTooltip {
     padding: 15px;
     position: absolute;
-    top: -50px;
+    top: 0;
+    width: 100%;
+}
+
+@media (max-width: 1100px) {
+    .dateTimeTooltip {
+        padding: 15px;
+        position: absolute;
+        top: -50px;
     left: 110px;
-    width: 610px;
-    min-width: 610px;
-    max-width: 610px;
+        width: 610px;
+        min-width: 610px;
+        max-width: 610px;
 }
 
 .dateTimeTooltip:before {
@@ -27,6 +35,7 @@
     z-index: -1;
     border-left: 1px solid rgba(9, 30, 66, 0.25);
     border-bottom: 1px solid rgba(9, 30, 66, 0.25);
+    }
 }
 
 .dateTimeTooltip > h2 {

jirs-client/js/css/styledModal.css

@@ -10,11 +10,6 @@
     -webkit-overflow-scrolling: touch;
 }
 
-.modal > .clickableOverlay {
-    min-height: 100%;
-    background: rgba(9, 30, 66, 0.54);
-}
-
 .modal > .clickableOverlay.center {
     display: flex;
     justify-content: center;
@@ -22,6 +17,35 @@
     padding: 50px;
 }
 
+@media (max-width: 1100px) {
+    .modal {
+        z-index: var(--modal);
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .modal > .clickableOverlay {
+        min-height: 100%;
+        background: rgba(9, 30, 66, 0.54);
+    }
+
+    .modal > .clickableOverlay.center {
+        display: block;
+        padding: 0;
+    }
+}
+
+.modal > .clickableOverlay {
+    min-height: 100%;
+    background: rgba(9, 30, 66, 0.54);
+}
+
 .modal > .clickableOverlay > .styledModal {
     display: inline-block;
     position: relative;
@@ -77,6 +101,17 @@
     color: var(--primary);
 }
 
+.modal > .clickableOverlay > .styledModal.addIssue {
+    max-width: 800px;
+}
+
+@media (max-width: 1100px) {
+    .modal > .clickableOverlay > .styledModal.addIssue {
+        max-width: none;
+        width: auto;
+    }
+}
+
 .modal > .clickableOverlay > .styledModal.confirmModal {
     padding: 35px 40px 40px;
 }

jirs-client/src/modal/issues/add_issue.rs

@@ -315,8 +315,8 @@ pub fn view(model: &Model, modal: &AddIssueModal) -> Node<Msg> {
     let form = form.add_field(actions).build().into_node();
 
     StyledModal::build()
-        .width(800)
-        .add_class("add-issue")
+        .add_class("addIssue")
+        .width(0)
         .variant(ModalVariant::Center)
         .children(vec![form])
         .build()

jirs-client/src/shared/styled_modal.rs

@@ -30,7 +30,7 @@ impl Variant {
 #[derive(Debug)]
 pub struct StyledModal {
     variant: Variant,
-    width: usize,
+    width: Option<usize>,
     with_icon: bool,
     children: Vec<Node<Msg>>,
     class_list: Vec<String>,
@@ -93,7 +93,7 @@ impl StyledModalBuilder {
     pub fn build(self) -> StyledModal {
         StyledModal {
             variant: self.variant.unwrap_or_else(|| Variant::Center),
-            width: self.width.unwrap_or_else(|| 130),
+            width: self.width,
             with_icon: self.with_icon.unwrap_or_default(),
             children: self.children.unwrap_or_default(),
             class_list: self.class_list,
@@ -112,7 +112,7 @@ pub fn render(values: StyledModal) -> Node<Msg> {
 
     let icon = if with_icon {
         StyledIcon::build(Icon::Close)
-            .add_class(variant.to_icon_class_name().to_string())
+            .add_class(variant.to_icon_class_name())
             .build()
             .into_node()
     } else {
@@ -127,9 +127,13 @@ pub fn render(values: StyledModal) -> Node<Msg> {
 
     let clickable_class = format!("clickableOverlay {}", variant.to_class_name());
     class_list.push(format!("styledModal {}", variant.to_class_name()));
-    let styled_modal_style = format!("max-width: {width}px", width = width);
+    let styled_modal_style = match width {
+        Some(0) => "".to_string(),
+        Some(n) => format!("max-width: {width}px", width = n),
+        _ => format!("max-width: {width}px", width = 130),
+    };
     div![
-        attrs![At::Class => "modal"],
+        C!["modal"],
         div![
             attrs![At::Class => clickable_class],
             close_handler,