enhance: nicer block typography and alignment

src/cljs/athens/types/tasks/view.cljs

@@ -141,9 +141,8 @@
                     :align                    "stretch"}
          [task-status-view-v2 block-uid status-uid]
          [:> Box {:flex       "1 1 100%"
-                  :py         1
-                  :cursor     "text"
-                  :lineHeight 1.4}
+                  :lineHeight "base"
+                  :cursor     "text"}
           [inline-task-title/inline-task-title-2
            callbacks
            block-uid
@@ -155,14 +154,15 @@
          [:> ModalInput {:placement "left-start"
                          :isLazy    true}
           [:> ModalInputTrigger
-           [:> Button {:size       "sm"
+           [:> Button {:size       "xs"
+                       :alignSelf "flex-start"
                        :flex       "1 0 auto"
                        :variant    "ghost"
                        :onClick    #(.. % stopPropagation)
                        :lineHeight "unset"
                        :whiteSpace "unset"
-                       :px         2
-                       :py         1}
+                       :height     "var(--control-height)"
+                       :px         2}
 
             ;; description
             (when (and show-description? description)
@@ -176,16 +176,16 @@
             (when (or due-date assignee)
               [:> Flex {:gap 1 :align "center"}
                (when (and show-assignee? assignee)
-                 [:> AvatarGroup {:size "xs"}
-                  [:> Avatar {:name assignee}]])
+                 [:> AvatarGroup
+                  [:> Avatar {:size "xs" :name assignee}]])
                (when (and show-due-date? due-date)
                  [:> Text {:fontSize "xs"} due-date])])
 
             ;; provenance
             [:> Flex {:gap 1 :align "center"}
              (when (and show-creator? creator)
-               [:> AvatarGroup {:size "xs"}
-                [:> Avatar {:name creator}]])
+               [:> AvatarGroup
+                [:> Avatar {:size "xs" :name creator}]])
              (when (and show-created-date? created-date)
                [:> Text {:fontSize "xs"} created-date])]
             [:> PencilIcon {:color "foreground.secondary"}]]]

src/cljs/athens/views/blocks/core.cljs

@@ -210,8 +210,10 @@
   [count click-fn active?]
   [:> Button {:gridArea "refs"
               :size "xs"
+              :height "var(--control-height)"
               :variant "ghost"
-              :placeSelf "center"
+              :colorScheme "subtle"
+              :alignSelf "flex-start"
               :zIndex 10
               :visibility (if (pos? count) "visible" "hidden")
               :isActive active?

src/cljs/athens/views/comments/inline.cljs

@@ -243,7 +243,7 @@
                         :color "foreground.secondary"
                         :flex "1 0 auto"
                         :bg "background.upper"
-                        :mb 2
+                        :my 2
                         :borderWidth "1px"
                         :borderStyle "solid"
                         :borderColor "separator.border"

src/js/components/Block/Anchor.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { IconButton, useMergeRefs, useTheme } from '@chakra-ui/react';
+import { IconButton, useMergeRefs } from '@chakra-ui/react';
 import { ColonIcon, BulletIcon, DashIcon } from '@/Icons/Icons';
 
 const ANCHORS = {
@@ -35,9 +35,6 @@ export const Anchor = React.forwardRef((props: AnchorProps, ref) => {
   } = props;
   const innerRef = React.useRef(null);
   const refs = useMergeRefs(innerRef, ref);
-  const theme = useTheme();
-
-  const buttonHeight = `calc(${theme.fontSizes.md} * ${theme.lineHeights.taller})`;
 
   return <IconButton
     className={['anchor', isClosedWithChildren && 'closed-with-children'].filter(Boolean).join(' ')}
@@ -59,7 +56,7 @@ export const Anchor = React.forwardRef((props: AnchorProps, ref) => {
       minHeight: "inherit",
       zIndex: 2,
       minWidth: "0",
-      h: buttonHeight,
+      h: "var(--control-height)",
       w: "auto",
       fontSize: "inherit",
       p: 0,

src/js/components/Block/Container.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { chakra, VStack, Alert, AlertIcon, AlertTitle, forwardRef, AlertDescription } from "@chakra-ui/react";
+import { useTheme, chakra, VStack, Alert, AlertIcon, AlertTitle, forwardRef, AlertDescription } from "@chakra-ui/react";
 import { ErrorBoundary } from "react-error-boundary";
 
 const ErrorMessage = ({ error }) => {
@@ -14,6 +14,8 @@ const ErrorMessage = ({ error }) => {
 
 export const Container = forwardRef((props, ref) => {
   const { children, isActive, isEditing, isHoveredNotChild, isDragging, isSelected, isOpen, hasChildren, uid, childrenUids, ...rest } = props;
+  const theme = useTheme();
+  const controlHeight = `calc(${theme.fontSizes.md} * ${theme.lineHeights.base})`;
 
   return <ErrorBoundary FallbackComponent={ErrorMessage}>
     <chakra.div
@@ -32,7 +34,9 @@ export const Container = forwardRef((props, ref) => {
       data-uid={uid}
       data-childrenuids={childrenUids}
       __css={{
+        "--control-height": controlHeight,
         position: 'relative',
+        pt: 2,
         borderRadius: '0.125rem',
         background: 'var(--block-surface-color)',
         justifyContent: 'flex-start',

src/js/components/Block/Content.tsx

@@ -13,13 +13,14 @@ export const Content = ({ children, ...props }) => {
       color: "foreground.primary",
       display: "grid",
       gridTemplateAreas: "'main'",
+      maxWidth: "80ch",
       alignItems: "stretch",
       justifyContent: "stretch",
       position: "relative",
       overflow: "visible",
       fontWeight: "normal",
       letterSpacing: "normal",
-      lineHeight: "taller",
+      lineHeight: "base",
       zIndex: 2,
       flexGrow: 1,
       wordBreak: "break-word",

src/js/components/Block/Toggle.tsx

@@ -11,9 +11,6 @@ interface ToggleProps extends React.HTMLAttributes<HTMLButtonElement> {
  */
 export const Toggle = (props: ToggleProps) => {
   const { isOpen, ...rest } = props;
-  const theme = useTheme();
-
-  const buttonHeight = `calc(${theme.fontSizes.md} * ${theme.lineHeights.taller})`;
 
   return (
     <IconButton
@@ -35,7 +32,7 @@ export const Toggle = (props: ToggleProps) => {
         minHeight: "inherit",
         zIndex: 2,
         minWidth: "0",
-        h: buttonHeight,
+        h: "var(--control-height)",
         w: "auto",
         fontSize: "inherit",
         p: 0,