A day's posts read from the left edge

A gui button centres its children, so each chip in the calendar's day column
sat in the middle of a track it did not fill. The chip takes the column's
width and its text reads from the left, which is where a list is read from.

Co-authored-by: Hanzo Dev <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/social",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "type": "module",
   "license": "Apache-2.0 OR MIT",

src/Calendar.tsx

@@ -11,7 +11,7 @@ import { useState } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { Box, Text, XStack, YStack } from '@hanzo/ui'
 
-import { Act, Ready, Failed, Screen } from '~/page'
+import { Act, Failed, Ready, Screen } from '~/page'
 import { Full } from '~/post'
 import { Mark, tone } from '~/status'
 import { day, grid } from '~/time'
@@ -120,6 +120,9 @@ export function Calendar() {
                   <Text fontSize="$1" color={key === today ? '$ink' : '$quiet'}>
                     {date.getDate()}
                   </Text>
+                  {/* The opened post inverts. That is the same spend as anywhere
+                      else — attention on one thing — and it is one thing by
+                      construction, because only one post is open at a time. */}
                   {here.map((post) => (
                     <Box
                       key={post.id}
@@ -134,11 +137,12 @@ export function Calendar() {
                       borderWidth={0}
                       hoverStyle={{ bg: post.id === opened ? '$ink' : '$hover' }}
                     >
-                      <YStack gap="$1" items="flex-start">
+                      <YStack gap="$1" items="flex-start" width="100%">
                         <Text
                           fontSize="$1"
                           color={post.id === opened ? '$background' : '$soft'}
                           numberOfLines={1}
+                          text="left"
                         >
                           {rule(post.channel).name}
                         </Text>

src/Compose.tsx

@@ -23,7 +23,7 @@ import { useState } from 'react'
 import { Trash2 } from 'lucide-react'
 import { Box, Text, XStack, YStack } from '@hanzo/ui'
 
-import { Act, Ready, Failed, Screen } from '~/page'
+import { Act, Failed, Ready, Screen } from '~/page'
 import { Mark, tone } from '~/status'
 import { MEDIA, check, kind, rule } from '~/network'
 import { fromField, now, toField } from '~/time'
@@ -473,6 +473,8 @@ export function Compose() {
                     borderWidth={0}
                     hoverStyle={{ bg: '$hover' }}
                   >
+                    {/* A gui button centres its children; a card's text reads
+                        from the left edge. */}
                     <YStack gap="$1" width="100%" items="flex-start">
                       <XStack items="center" gap="$2" width="100%">
                         <Text fontSize="$2" color={on ? '$ink' : '$soft'} flex={1} text="left">