Trim space name, fix name input layout.

src/components/Card.module.css

@@ -7,6 +7,7 @@
   background-color: var(--color-bg-1);
   border: 1px solid gray;
   min-width: 20rem;
+  box-shadow: var(--shadow-1);
 
   & .response {
     display: grid;

src/db/space.ts

@@ -10,7 +10,7 @@ export function createSpace(name: string): Space {
   const space: Space = {
     version: projectVersion(),
     id: createUUID(),
-    name,
+    name: name.trim(),
     createdTimestamp: timestampNow(),
     cards: {},
   }

src/design-system.css

@@ -13,4 +13,6 @@
 
   --color-bg-1: white;
   --color-bg-2: #EEE;
+
+  --shadow-1: 0 3px 16px #0004;
 }

src/routes/space/[id].module.css

@@ -10,7 +10,8 @@
   grid-area: main;
   display: flex;
   flex-direction: column;
-  margin: var(--space-4);
+  padding: var(--space-4);
+  overflow: hidden;
 }
 
 .main-top-bar {
@@ -29,7 +30,7 @@
   margin-inline-end: 0;
   border-radius: var(--space-4);
   min-height: 10rem;
-  box-shadow: 0 2px 16px #0002;
+  box-shadow: var(--shadow-1);
 }
 
 .my-cards-list {
@@ -52,6 +53,7 @@
   text-align: center;
   line-height: 1;
   height: 1em;
+  min-width: 0;
 }
 
 .deck {
@@ -104,6 +106,10 @@
   grid-area: main;
   place-self: flex-end;
   color: gray;
+
+  &::before {
+    content: 'version ';
+  }
 }
 
 @media (max-width: 900px) {
@@ -131,4 +137,8 @@
     flex: unset;
     overflow-y: unset;
   }
+
+  .project-version::before {
+    content: 'v';
+  }
 }

src/routes/space/[id].tsx

@@ -24,12 +24,19 @@ function SpaceName() {
         ref={autofocusFix}
         class={ui.spaceName}
         value={space.name}
-        onInput={ev => setSpace('name', ev.currentTarget.value)}
-        onChange={() => setEditingSpaceName(false)}
+        onChange={ev => {
+          setSpace('name', ev.currentTarget.value.trim())
+          setEditingSpaceName(false)
+        }}
         onBlur={() => setEditingSpaceName(false)}
       />
     }>
-      <h1 class={ui.spaceName} title='Space name' onDblClick={() => setEditingSpaceName(true)}>{space.name}</h1>
+      <h1
+        class={ui.spaceName}
+        title='Space name'
+        onClick={() => setEditingSpaceName(true)}>
+        {space.name}
+      </h1>
     </Show>
   )
 }
@@ -156,7 +163,7 @@ export default function SpaceComponent() {
                 </div>
                 <Deck adding={adding()} setAdding={setAdding} />
                 <CardControls adding={adding()} setAdding={setAdding} />
-                <span class={ui.projectVersion}>version {projectVersion()}</span>
+                <span class={ui.projectVersion}>{projectVersion()}</span>
               </div>
             </main>
           </SpaceContext.Provider>