Context View: Align bullet with context

[raineorshine]

Context View: Align bullet with context

[raineorshine]

Adding vertical-align: bottom to the Bullet solves the issue but breaks multiline thoughts.

We need to align the Bullet with the first line of the thought.

• Align to top and move down
  • Depends on height of ContextBreadcrumbs
• Align to bottom and move up
  • Depends on height of Thought
• Align to top of new div that wraps Thought.

Commit: aec1198

diff --git a/src/App.css b/src/App.css
index bcc420ef66..e1388b2422 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1088,12 +1088,6 @@ h1 .num-contexts {
   padding: 0.2em 0 0.2em 100px;
 }

-/* In context view, make room for breadcrumbs. */
-.child.show-contexts > .thought-container .bullet {
-  position: relative;
-  top: 1.4em;
-}
-
 .child > .thought-container > .bullet .glyph {
   position: relative;
   /*margin-right: 10px;    this causes the li to break at the beginning with longer text */
diff --git a/src/components/Bullet.tsx b/src/components/Bullet.tsx
index f2276781fa..e3a4f6cccb 100644
--- a/src/components/Bullet.tsx
+++ b/src/components/Bullet.tsx
@@ -156,6 +156,8 @@ const Bullet = ({
       })}
       style={{
         marginLeft: bulletMarginLeft,
+        // align bullet to thought even if ContextBreadcrumbs is multiple lines
+        verticalAlign: 'bottom',
       }}
     >

[raineorshine]

Test Case:

- a
  - m
    - x
- b do it for your country
  - c do it for your country
    - d do it for your country
      - everything everywhere all at once everything everywhere all at once everything everywhere all at once
        - m
          - y