Slightly improve script selection dropdown

- Adjust corner radius to make it matched with other buttons
- Adjust height to make it matched with other buttons
- Adjust width to let it fill the horizontal space
- `You can only have 20 scripts` shouldn't be clickable when there are 20 scripts
- Auto close dropdown

public/stylesheets/automator.css

@@ -309,7 +309,7 @@
 }
 
 .c-automator-docs-script-select {
-  height: 2.2rem;
+  height: calc(2.1rem + 1rem / 3 - var(--var-border-width, 0rem) * 2);
   width: 100%;
   padding: 0 0.5rem;
   text-align: left;
@@ -318,7 +318,7 @@
   color: var(--color-automator-docs-font);
   background-color: var(--color-automator-controls-inactive);
   border: var(--var-border-width, 0.2rem) solid var(--color-automator-controls-border);
-  border-radius: var(--var-border-radius, 0.4rem);
+  border-radius: var(--var-border-radius, 0.3rem);
   cursor: pointer;
 }
 

src/components/tabs/automator/AutomatorDocs.vue

@@ -285,7 +285,10 @@ export default {
         />
         <div class="l-automator__script-names">
           <template v-if="!editingName">
-            <ExpandingControlBox class="l-automator__scripts-dropdown">
+            <ExpandingControlBox
+              class="l-automator__scripts-dropdown"
+              :auto-close="true"
+            >
               <template #header>
                 <div class="c-automator-docs-script-select">
                   ▼ Current Script: {{ currentEditorScriptName }}
@@ -336,9 +339,9 @@ export default {
 }
 
 .l-automator__script-names {
+  flex-grow: 1;
   display: flex;
   flex-direction: row;
-  width: 80%;
   justify-content: space-evenly;
   align-items: center;
 }
@@ -359,6 +362,7 @@ export default {
 }
 
 .c-automator__rename-input {
+  font-family: Typewriter;
   font-size: 1.2rem;
   color: var(--color-automator-docs-font);
   background-color: var(--color-automator-controls-active);

src/components/tabs/automator/AutomatorScriptDropdownEntryList.vue

@@ -141,5 +141,6 @@ export default {
 
 .l-max-scripts {
   background-color: var(--color-automator-error-background);
+  cursor: auto;
 }
 </style>