Layout improvements

Co-Authored-By: Tom Richards <[email protected]>
guardian · Dec 1, 2023 · 9ce0fb1 · 9ce0fb1
1 parent 9a36de2
commit 9ce0fb1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/bootstrapping-lambda/local/index.html b/bootstrapping-lambda/local/index.html
@@ -39,7 +39,9 @@ <h4>
       </button>
 
       <h5>Starred messages (requires pinboard pre-selection)</h5>
-      <pinboard-starred-messages></pinboard-starred-messages>
+      <div style="max-width: 710px">
+        <pinboard-starred-messages></pinboard-starred-messages>
+      </div>
 
       <h4>via hidden element (for invalid/untracked composer ID)</h4>
       <button id="btn-add-invalid-preselection">

diff --git a/client/src/starred/starredMessages.tsx b/client/src/starred/starredMessages.tsx
@@ -56,8 +56,10 @@ const StarredItemDisplay = ({
       >
         {item.message}
       </span>
-      <span title={item.userEmail}>{userDisplayName}</span>
-      <span>
+      <span css={detailCSS} title={item.userEmail}>
+        {userDisplayName}
+      </span>
+      <span css={detailCSS}>
         <FormattedDateTime timestamp={item.timestamp} withAgo />
       </span>
     </div>
@@ -88,27 +90,10 @@ const StarredMessages = ({
           display: flex;
           flex-direction: column;
           gap: ${space[3]}px;
+          cursor: pointer;
         `}
+        onClick={() => setIsExpanded(true)}
       >
-        {maybeStarredMessages.length === 0 && (
-          <span
-            css={css`
-              cursor: pointer;
-            `}
-            onClick={() => setIsExpanded(true)}
-          >
-            <strong>
-              If you need to leave an important message please use Pinboard
-              &apos;Starred Messages&apos; rather than notes.{" "}
-            </strong>
-            <br />
-            Click here to open Pinboard, then simply send a message and then
-            click the <SvgStar size="xsmall" /> to the left of your message.
-            <br />
-            You can also star other&apos;s messages if you think they&apos;re
-            important.
-          </span>
-        )}
         {maybeStarredMessages.map((item) => (
           <StarredItemDisplay
             key={item.id}
@@ -124,6 +109,18 @@ const StarredMessages = ({
             }
           />
         ))}
+        <span>
+          <strong>
+            If you need to leave an important message please use Pinboard
+            &apos;Starred Messages&apos; rather than notes.{" "}
+          </strong>
+          <br />
+          Click here to open Pinboard, then simply send a message and then click
+          the <SvgStar size="xsmall" /> to the left of your message.
+          <br />
+          You can also star other&apos;s messages if you think they&apos;re
+          important.
+        </span>
       </div>
     </root.div>
   );
@@ -138,3 +135,8 @@ export const StarredMessagesPortal = ({
   ...props
 }: StarredMessagesPortalProps) =>
   ReactDOM.createPortal(<StarredMessages {...props} />, node);
+
+const detailCSS = css`
+  margin-left: 7px;
+  vertical-align: sub;
+`;