More UI improvements

src/components/internal/Block.tsx

@@ -85,7 +85,6 @@ export default defineComponent({
     return () => <div
       ref={el}
       class={classes.value}
-      onClick={($event: MouseEvent) => $event.stopPropagation()}
     >
       <div class="sb-block__edit-cover"></div>
       {props.sortable

src/components/internal/BlockOrdering.tsx

@@ -55,6 +55,7 @@ export default defineComponent({
       <div
         class={classes.value}
         style={styles}
+        onClick={($event: MouseEvent) => $event.stopPropagation()}
       >
         <SbButton onClick={props.eventMoveUp}>{props.sortable === 'vertical' ? '↑' : '←'}</SbButton>
         <SbButton onClick={props.eventRemoveBlock}>x</SbButton>

src/components/internal/Select.scss

@@ -0,0 +1,25 @@
+.sb-select {
+  background-color: var(--grey-0);
+  border: 1px solid var(--grey-2);
+  position: relative;
+
+  &:hover {
+    border: 1px solid var(--interact);
+  }
+
+  &::after {
+    position: absolute;
+    content: '⯆';
+    top: 6px;
+    height: 100%;
+    right: 12px;
+    pointer-events: none;
+  }
+
+  &__input {
+    background: transparent;
+    appearance: none;
+    border: 0;
+    padding: 8px 32px 8px 12px;
+  }
+}

src/components/internal/Select.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from '@vue/composition-api';
+
+import './Select.scss';
+
+export default defineComponent({
+  name: 'sb-select',
+
+  inheritAttrs: false,
+
+  setup(props, context) {
+    return () => (
+      <div class="sb-select">
+        <select
+          class="sb-select__input"
+          {...{
+            attrs: context.attrs,
+            on: context.listeners,
+          }}
+        >
+          {context.slots.default()}
+        </select>
+      </div>
+    );
+  },
+});

src/components/internal/Toolbar.tsx

@@ -36,6 +36,7 @@ export default defineComponent({
       <div
         class="sb-toolbar"
         style={styles}
+        onClick={($event: MouseEvent) => $event.stopPropagation()}
       >
         {context.slots.default()}
       </div>

src/components/user/Paragraph/edit.tsx

@@ -17,6 +17,7 @@ import {
 } from '@components/TreeElement';
 
 import SbToolbar from '@internal/Toolbar';
+import SbSelect from '@internal/Select';
 
 import {
   getDefaultData,
@@ -114,7 +115,6 @@ export default defineComponent({
         value: localData.value,
         align: localData.align,
       });
-      activate(null);
     };
 
     const onKeydown = ($event: KeyboardEvent) => {
@@ -141,14 +141,14 @@ export default defineComponent({
     return () => (
       <div class={classes.value}>
         <SbToolbar>
-          <select
+          <SbSelect
             value={localData.align}
             onChange={setAlignment}
           >
             <option>left</option>
             <option>center</option>
             <option>right</option>
-          </select>
+          </SbSelect>
         </SbToolbar>
         <p
           class="sb-paragraph__input"