Render edit-modals above the menu and not the whole page

modules/webapp/src/main/elm/Comp/ContactField.elm

@@ -5,6 +5,7 @@ module Comp.ContactField exposing
     , getContacts
     , update
     , view
+    , view1
     )
 
 import Api.Model.Contact exposing (Contact)
@@ -81,9 +82,15 @@ update msg model =
                         Comp.Dropdown.getSelected model.kind
                             |> List.head
                             |> Maybe.map Data.ContactType.toString
-                            |> Maybe.withDefault ""
                 in
-                ( { model | items = Contact "" model.value kind :: model.items, value = "" }, Cmd.none )
+                case kind of
+                    Just k ->
+                        ( { model | items = Contact "" model.value k :: model.items, value = "" }
+                        , Cmd.none
+                        )
+
+                    Nothing ->
+                        ( model, Cmd.none )
 
         Select contact ->
             let
@@ -100,12 +107,27 @@ update msg model =
 
 view : UiSettings -> Model -> Html Msg
 view settings model =
+    view1 settings False model
+
+
+view1 : UiSettings -> Bool -> Model -> Html Msg
+view1 settings compact model =
     div []
-        [ div [ class "fields" ]
+        [ div [ classList [ ( "fields", not compact ) ] ]
-            [ div [ class "four wide field" ]
+            [ div
+                [ classList
+                    [ ( "field", True )
+                    , ( "four wide", not compact )
+                    ]
+                ]
                 [ Html.map TypeMsg (Comp.Dropdown.view settings model.kind)
                 ]
-            , div [ class "twelve wide field" ]
+            , div
+                [ classList
+                    [ ( "twelve wide", not compact )
+                    , ( "field", True )
+                    ]
+                ]
                 [ div [ class "ui action input" ]
                     [ input
                         [ type_ "text"

modules/webapp/src/main/elm/Comp/DetailEdit.elm

@@ -416,13 +416,13 @@ viewIntern settings withButtons model =
             Html.map TagMsg (Comp.TagForm.view tm)
 
         PMR pm ->
-            Html.map PersonMsg (Comp.PersonForm.view settings pm)
+            Html.map PersonMsg (Comp.PersonForm.view1 settings True pm)
 
         PMC pm ->
-            Html.map PersonMsg (Comp.PersonForm.view settings pm)
+            Html.map PersonMsg (Comp.PersonForm.view1 settings True pm)
 
         OM om ->
-            Html.map OrgMsg (Comp.OrgForm.view settings om)
+            Html.map OrgMsg (Comp.OrgForm.view1 settings True om)
 
         EM em ->
             Html.map EquipMsg (Comp.EquipmentForm.view em)
@@ -461,13 +461,18 @@ viewModal settings mm =
     in
     div
         [ classList
-            [ ( "ui inverted modals page dimmer", True )
+            [ ( "ui inverted dimmer", True )
             , ( "invisibe hidden", hidden )
             , ( "active", not hidden )
             ]
         , style "display" "flex !important"
         ]
-        [ div [ class "ui modal active" ]
+        [ div
+            [ classList
+                [ ( "ui modal keep-small", True )
+                , ( "active", not hidden )
+                ]
+            ]
             [ div [ class "header" ]
                 [ Maybe.map .form mm
                     |> Maybe.map headIcon

modules/webapp/src/main/elm/Comp/ItemDetail/View.elm

@@ -37,8 +37,7 @@ import Util.Time
 view : { prev : Maybe String, next : Maybe String } -> UiSettings -> Model -> Html Msg
 view inav settings model =
     div []
-        [ Html.map ModalEditMsg (Comp.DetailEdit.viewModal settings model.modalEdit)
+        [ renderItemInfo settings model
-        , renderItemInfo settings model
         , renderDetailMenu inav model
         , renderMailForm settings model
         , renderAddFilesForm model
@@ -684,7 +683,8 @@ renderTags settings model =
 
 renderEditMenu : UiSettings -> Model -> List (Html Msg)
 renderEditMenu settings model =
-    [ div [ class "ui segments" ]
+    [ Html.map ModalEditMsg (Comp.DetailEdit.viewModal settings model.modalEdit)
+    , div [ class "ui segments" ]
         [ renderEditButtons model
         , renderEditForm settings model
         ]

modules/webapp/src/main/elm/Comp/OrgForm.elm

@@ -6,6 +6,7 @@ module Comp.OrgForm exposing
     , isValid
     , update
     , view
+    , view1
     )
 
 import Api.Model.Organization exposing (Organization)
@@ -109,6 +110,11 @@ update flags msg model =
 
 view : UiSettings -> Model -> Html Msg
 view settings model =
+    view1 settings False model
+
+
+view1 : UiSettings -> Bool -> Model -> Html Msg
+view1 settings compact model =
     div [ class "ui form" ]
         [ div
             [ classList
@@ -132,7 +138,7 @@ view settings model =
         , h3 [ class "ui dividing header" ]
             [ text "Contacts"
             ]
-        , Html.map ContactMsg (Comp.ContactField.view settings model.contactModel)
+        , Html.map ContactMsg (Comp.ContactField.view1 settings compact model.contactModel)
         , h3 [ class "ui dividing header" ]
             [ text "Notes"
             ]

modules/webapp/src/main/elm/Comp/PersonForm.elm

@@ -6,6 +6,7 @@ module Comp.PersonForm exposing
     , isValid
     , update
     , view
+    , view1
     )
 
 import Api.Model.Person exposing (Person)
@@ -123,6 +124,11 @@ update flags msg model =
 
 view : UiSettings -> Model -> Html Msg
 view settings model =
+    view1 settings False model
+
+
+view1 : UiSettings -> Bool -> Model -> Html Msg
+view1 settings compact model =
     div [ class "ui form" ]
         [ div
             [ classList
@@ -157,7 +163,7 @@ view settings model =
         , h3 [ class "ui dividing header" ]
             [ text "Contacts"
             ]
-        , Html.map ContactMsg (Comp.ContactField.view settings model.contactModel)
+        , Html.map ContactMsg (Comp.ContactField.view1 settings compact model.contactModel)
         , h3 [ class "ui dividing header" ]
             [ text "Notes"
             ]

modules/webapp/src/main/webjar/docspell.css

@@ -170,6 +170,14 @@ textarea.markdown-editor {
     background: rgba(0,0,0,0.2);
 }
 
+@media only screen and (min-width: 992px) {
+    .ui.modal.keep-small {
+        width: inherit;
+        margin: 0 0 0 1rem;
+    }
+}
+
+
 label span.muted {
     font-size: smaller;
     color: rgba(0,0,0,0.6);