UI tweaking for message forwarding

css/base.css

@@ -342,27 +342,37 @@ div.alert-container {
   align-items: center;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,0.33);
+  background: rgba(240,240,240,0.85);
   z-index: 3;
 }
 div.alert {
+  position: relative;
   background-color: white;
   box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
   padding: 1rem;
-  border-radius: 4px;
+  border-radius: 0.3rem;
   margin: auto 2rem auto 2rem;
-  width: content;
+  width: fit-content;
   min-width: 16rem;
   max-width: 24rem;
 }
-div.alert .title {
+div.alert-container .title {
   color: #2196f3;
   font-size: 1.2rem;
   font-weight: 500;
   width: 100%;
   padding: 0 0 0.35rem 0;
 }
-div.alert .content {
+
+div.alert-container .title.with-control {
+  display: flex;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+  align-items: center;
+  flex: none;
+  justify-content: space-between;
+}
+
+div.alert-container .content {
   padding: 0.5rem 0 0.5rem 0;
 }
 /* END Alert */
@@ -2530,15 +2540,16 @@ ul.tabbar li.active > a {
 }
 
 /* Message forwarding. */
-
-.forward-menu {
-  position: absolute;
-  z-index: 4;
-  max-height: 80%;
-  border-radius: 0.2rem;
-  padding-top: 0.35rem;
-  padding-bottom: 0.35rem;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
-  background-color: white;
+.forward-dialog {
+  position: relative;
   overflow: auto;
+  background-color: white;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+  margin: auto 1rem auto 1rem;
+  width: fit-content;
+  min-width: 16rem;
+  max-width: 24rem;
+  max-height: 80%;
 }