use css for modals

fedireads/static/format.css

@@ -172,6 +172,7 @@ body {
     padding-top: 70px;
     position: relative;
     z-index: 0;
+    margin-top: -2em;
 }
 
 /* row component */
@@ -484,8 +485,9 @@ dd {
 .all-shelves {
     display: flex;
     flex-direction: row;
-    overflow-y: hidden;
     margin-left: 0;
+    position: relative;
+    z-index: 1;
 }
 .all-shelves > div {
     flex-grow: 0;
@@ -510,7 +512,6 @@ dd {
     font-size: 0.9em;
     overflow: unset;
     width: min-content;
-    position: relative;
 }
 .covers-shelf .cover-container:last-child {
     margin-right: 0;
@@ -534,16 +535,33 @@ dd {
     padding: 1rem;
 }
 
-.compose-suggestion {
+.all-shelves input[type='radio'] {
     display: none;
 }
-.compose-suggestion.visible {
+.compose-suggestion {
+    display: none;
+    background-color: white;
+    z-index: 1;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.45);
+}
+input:checked ~ .compose-suggestion {
     display: block;
+    position: absolute;
+    top: 5em;
+    left: 0;
 }
 .compose-suggestion .book-preview {
     background-color: #EEE;
     padding: 1em;
 }
+.compose-suggestion button {
+    margin: 0;
+}
+.compose-suggestion .stars {
+    text-align: left;
+}
 
 .tag {
     display: inline-block;

fedireads/static/js/shared.js

@@ -1,20 +1,3 @@
-function show_compose(element, e) {
-    e.preventDefault();
-    var visible_compose_boxes = document.getElementsByClassName('visible');
-    for (var i = 0; i < visible_compose_boxes.length; i++) {
-        visible_compose_boxes[i].className = 'compose-suggestion';
-    }
-
-    var target_id = 'compose-' + element.id;
-    var target = document.getElementById(target_id);
-    target.className += ' visible';
-}
-
-function hide_element(element) {
-    var classes = element.parentElement.className;
-    element.parentElement.className = classes.replace('visible', '');
-}
-
 function interact(e) {
     e.preventDefault();
     ajaxPost(e.target);