Refactor lists into flexbox

tvdeyen · Mar 26, 2024 · 1ef5dd4 · 1ef5dd4
1 parent f296074
commit 1ef5dd4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -307,7 +307,7 @@ div#filter_bar {
 
 #overlay_file_list {
   .assign_file_file {
-    display: block;
+    display: flex;
     margin-bottom: 4px;
     word-break: break-all;
 
@@ -322,7 +322,8 @@ div#filter_bar {
 
     a {
       @extend %text-overflow;
-      display: block;
+      display: flex;
+      width: 100%;
       line-height: 25px;
       text-decoration: none;
       padding: $default-padding 2 * $default-padding;

diff --git a/app/assets/stylesheets/alchemy/lists.scss b/app/assets/stylesheets/alchemy/lists.scss
@@ -1,4 +1,5 @@
-ul, ol {
+ul,
+ol {
   padding-left: 16px;
   margin-top: 1em;
   margin-bottom: 1em;
@@ -15,15 +16,15 @@ ul.list {
 
   li {
     list-style-type: none;
-    display: block;
+    display: flex;
     margin-bottom: 0;
 
     &.list-header {
       overflow: hidden;
       background-color: transparent;
       font-weight: bold;
-      padding: $default-padding 2*$default-padding;
-      margin-bottom: 2*$default-margin;
+      padding: $default-padding 2 * $default-padding;
+      margin-bottom: 2 * $default-margin;
 
       .list-secondary {
         color: $text-color;
@@ -41,19 +42,19 @@ ul.list {
 
   .list-primary,
   .list-secondary {
-    display: inline-block;
+    display: inline-flex;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;
   }
 
   .list-primary {
-    float: left;
     max-width: 65%;
   }
 
-  .list-secondary, .right {
-    float: right;
+  .list-secondary,
+  .right {
+    margin-left: auto;
     text-align: left;
     width: 30%;
     color: $dark-gray;