Improve exports and GUI

app/assets/stylesheets/application.bootstrap.scss

@@ -162,4 +162,5 @@ trix-toolbar .trix-dialog--link {
   overflow-y: auto;
 } */
 
-@import "./layout";
+@import "./layout";
+@import "./dropdown";

app/assets/stylesheets/dropdown.scss

@@ -0,0 +1,67 @@
+.details-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+/* Hide The disclosure widget: */
+.details-dropdown summary {
+  list-style: none;
+  cursor: pointer;
+}
+.details-dropdown[open] summary {
+  list-style: none;
+  cursor: pointer;
+  i {
+    
+  color: var(--bs-body-color)
+  }
+  /* border-left: solid 1px $secondary; */
+  /* border-top: solid 1px $secondary; */
+  /* border-right: solid 1px $secondary; */
+}
+.details-dropdown[open] {
+  background-color: $secondary;
+}
+
+/* Detache details content */
+.details-dropdown .details-dropdown-content {
+  border: solid 1px $secondary;
+  position: absolute;
+  min-inline-size: max-content;
+  z-index: 2000;
+
+  /* In case the details-dropdown should open to the left: */
+  right: 0;
+}
+
+/* Closing the details-dropdown on clicking anywhere else */
+.details-dropdown[open] summary::before {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  cursor: default;
+}
+
+/* Visual styles for your details-dropdown: */
+.details-dropdown .details-dropdown-trigger {
+  /* your look and feel here */
+}
+
+.details-dropdown .details-dropdown-content {
+  /* your look and feel here */
+}
+
+form.no-padding {
+  button {
+    padding: 0;
+  }
+}
+
+li.list-group-item-danger:hover {
+  button {
+    color: var(--bs-body-color) ;
+  }
+}

app/assets/stylesheets/layout.scss

@@ -91,7 +91,9 @@ $tertiary-dark-active-open: $gray-600;
 .page_nav nav ul {
   padding-left: 0;
   list-style-type: none;
-  line-height: 2rem;
+  li {
+    margin-bottom: 0.5rem;
+  }
 
   a {
     color: var(--bs-text);
@@ -223,7 +225,14 @@ details.tree[open]>summary::before {
   padding-bottom: 0;
 }
 
+details.success_criterion:last-child {
+  border-bottom: solid 1px $tertiary;
+}
+
 details.success_criterion {
+  border: solid 1px $tertiary;
+  border-bottom: solid 0px $tertiary;
+
   summary:hover {
     background-color: $tertiary-hover;
 
@@ -255,24 +264,31 @@ details.success_criterion {
 details.success_criterion[open] {
   border: solid 1px $tertiary;
 
-  summary {
+  >summary {
     background-color: $tertiary;
   }
 
-  summary:hover {
+  >summary:hover {
     background-color: $tertiary-active-hover;
   }
 }
 
 @include color-mode(dark) {
+  details.success_criterion {
+    border: solid 1px $tertiary-dark;
+    border-bottom: solid 0px $tertiary-dark;
+  }
+  details.success_criterion:last-child {
+    border-bottom: solid 1px $tertiary-dark;
+  }
   details.success_criterion[open] {
     border: solid 1px $tertiary-dark;
 
-    summary {
+    >summary {
       background-color: $tertiary-dark;
     }
 
-    summary:hover {
+    >summary:hover {
       background-color: $tertiary-dark-active-open;
     }
   }
@@ -326,4 +342,4 @@ details[open] {
 
 .sortable-ghost {
   border: solid 3px $primary !important;
-}
+}