From f1800bf33208ce1e9ca88e389c29a49f25fe56a0 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 20 Nov 2020 09:39:25 -0800
Subject: [PATCH] docs: move reactive label to component prop name column

---
 README.md                               |  6 +++---
 docs/src/components/ComponentApi.svelte | 15 +++++++--------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index b8839eda..7e0768b1 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 # carbon-components-svelte
 
-> `carbon-components-svelte` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
+carbon-components-svelte is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
 
-> A design system can facilitate frontend development and prototyping because it encourages reuse, consistency, and extensibility.
+A design system can facilitate frontend development and prototyping because it encourages reuse, consistency, and extensibility.
 
 [![NPM][npm]][npm-url]
 [![Build][build]][build-badge]
@@ -16,7 +16,7 @@
 
 Install `carbon-components-svelte` as a development dependency.
 
-```bash
+```sh
 yarn add -D carbon-components-svelte
 # OR
 npm i -D carbon-components-svelte
diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index ca3f22b5..bc7eb193 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -92,6 +92,13 @@
           <StructuredListRow>
             <StructuredListCell noWrap>
               <InlineSnippet code="{prop.name}" />
+              {#if prop.reactive}
+                <div
+                  style="white-space: nowrap; margin-top: var(--cds-spacing-03)"
+                >
+                  <Tag type="cyan">Reactive</Tag>
+                </div>
+              {/if}
             </StructuredListCell>
             <StructuredListCell>
               {#each prop.type.split(' | ') as type, i (type)}
@@ -125,14 +132,6 @@
                   {/if}
                 </div>
               {/each}
-
-              {#if prop.reactive}
-                <div
-                  style="white-space: nowrap; margin-left: calc(-1 * var(--cds-spacing-03)); margin-top: var(--cds-spacing-05)"
-                >
-                  <Tag type="green">Reactive</Tag>
-                </div>
-              {/if}
             </StructuredListCell>
             <StructuredListCell><code>{prop.value}</code></StructuredListCell>
             <StructuredListCell>