v0.2.97

static/css/styles.css

@@ -2858,14 +2858,16 @@ dialog::backdrop {
 }
 
 .image-alias-tools {
-  position: absolute;
-  z-index: 4;
+  position: fixed;
+  z-index: 1000;
   top: 8px;
-  right: 8px;
   left: 8px;
+  width: max-content;
+  max-width: min(720px, calc(100vw - 24px));
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 8px;
   flex-wrap: wrap;
   padding: 6px;
@@ -2912,11 +2914,30 @@ dialog::backdrop {
   font-size: .72rem;
 }
 
-.image-alias-size input {
+.image-alias-size input[type="number"] {
   width: 66px;
   padding: 3px 5px;
 }
 
+.image-alias-size .image-alias-aspect {
+  gap: 5px;
+  padding: 0 4px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.image-alias-size .image-alias-aspect input {
+  width: 15px;
+  height: 15px;
+  min-height: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
 .image-alias-resize {
   position: absolute;
   z-index: 5;
@@ -2939,8 +2960,8 @@ dialog::backdrop {
 @media(max-width:680px) {
   .image-alias-tools {
     top: 4px;
-    right: 4px;
     left: 4px;
+    max-width: calc(100vw - 24px);
     padding: 4px;
   }