Minor fixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",

src/components/PanelAttributes.vue

@@ -165,14 +165,6 @@ function plot() {
         <h3>Add a new attribute</h3>
         <div :class="$style.attributeItem">
           <div :class="$style.newAttributeName">
-            <label :class="[interfaceStyles.labeledField, $style.labeledField]">
-              <input
-                v-model="newAttributeName"
-                autocapitalize="off"
-                type="text"
-                placeholder="Enter attribute name…"
-              >
-            </label>
             <label :class="$style.attributeListCtrl">
               <select
                 :class="$style.attributeList"
@@ -195,6 +187,14 @@ function plot() {
                 </optgroup>
               </select>
             </label>
+            <label :class="[interfaceStyles.labeledField, $style.labeledField]">
+              <input
+                v-model="newAttributeName"
+                autocapitalize="off"
+                type="text"
+                placeholder="Enter attribute name…"
+              >
+            </label>
             <button
               type="button"
               :class="[$style.addAttributeButton, interfaceStyles.iconButton, interfaceStyles.iconButtonAdd]"

src/components/PanelCollections.vue

@@ -147,14 +147,19 @@ function deleteLSystem(lid) {
   }
 
   .filterField {
+    appearance: textfield; /* fixes border-radius issue in Safari */
     box-sizing: border-box;
     flex-grow: 1;
     min-width: 0;
     padding-left: 0;
     padding-right: 0;
   }
 
-  .collections,
+  .collections {
+    list-style: none;
+    padding: 0 4px 0 0;
+  }
+
   .collectionItems {
     list-style: none;
     padding: 0;
@@ -199,12 +204,10 @@ function deleteLSystem(lid) {
     flex-shrink: 0;
   }
 
-  @media (hover: hover) {
-    .collectionItems li:not(:hover, .active) {
-      .exploreButton:not(:focus),
-      .deleteLSystemButton:not(:focus) {
-        opacity: 0.01;
-      }
+  .collectionItems li:not(:hover, .active) {
+    .exploreButton:not(:focus),
+    .deleteLSystemButton:not(:focus) {
+      opacity: 0.01;
     }
   }
 </style>

src/stores/interface.mjs

@@ -6,7 +6,7 @@ export const POPOVER_DISMISS = "dismiss";
 
 export let useInterfaceStore = defineStore("interface", () => {
   /** Currently opened sidebar panel */
-  let openedPanel = ref("");
+  let openedPanel = ref("collections");
 
   /**
    * Toggle panel’s state

src/styles/main.css

@@ -24,7 +24,7 @@
   }
 
   --size-sidebar-button: 28px;
-  --size-sidebar-panel: 290px;
+  --size-sidebar-panel: 300px;
 
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;