From 3e3882b2b069dc332c4120c04063c87a1eae95bf Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Wed, 24 Apr 2024 16:15:50 +0000
Subject: [PATCH] docs: Minor fixes

---
 docs/docs/components/component_page.md.tpl    | 41 +++++++++++--------
 .../core_components/content/CoreMessage.vue   | 18 ++++----
 2 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/docs/docs/components/component_page.md.tpl b/docs/docs/components/component_page.md.tpl
index ed89c44cc..462067bf3 100644
--- a/docs/docs/components/component_page.md.tpl
+++ b/docs/docs/components/component_page.md.tpl
@@ -9,8 +9,10 @@
 
 {{ component.description }}
 
-<div class="imageContainer">
-	<img :src="withBase(`/components/${component.type}.png`)">
+<div class="expandedImageContainer">
+	<div class="expandedImageContainerInner">
+		<img :src="withBase(`/components/${component.type}.png`)">
+	</div>
 </div>
 
 <div v-html="`${ markdownToHtml(component.docs) }`"></div>
@@ -57,7 +59,7 @@
 
 <h2>Low code usage</h2>
 
-This component can be used in python
+This component can be declared directly in Python, using [backend-driven UI](../backend-driven-ui).
 
 <div class="language-py vp-adaptive-theme">
 	<button title="Copy Code" class="copy"></button>
@@ -66,7 +68,7 @@ This component can be used in python
 </div>
 
 <div v-if="component.events">
-	<div>The function <code>handle_event</code> should be implemented in your code to handle events.</div>
+	<div>A function, in this example <code>handle_event</code>, should be implemented in your code to handle events.</div>
 	<div class="language-py vp-adaptive-theme">
 		<button title="Copy Code" class="copy"></button>
 		<span class="lang">python</span>
@@ -77,26 +79,33 @@ This component can be used in python
 
 <h2>Reference</h2>
 
-* [Learn more about building Backend-driven UI](../backend-driven-ui)
-* <a :href="`https://github.com/streamsync-cloud/streamsync/blob/dev/ui/${component.fileRef}`" target="_blank" >Explore the source on GitHub</a>
+* <a :href="`https://github.com/streamsync-cloud/streamsync/blob/dev/src/ui/${component.fileRef}`" target="_blank" >Explore this component's source code on GitHub</a>
 
 
 <style>
 
-.imageContainer {
+.expandedImageContainer {
+	padding: 16px;
+	border-radius: 16px;
+    background: #E9EEF1;
+	overflow: hidden;
 	display: flex;
 	justify-content: center;
-	margin: 16px 0;
 }
 
-.imageContainer img {
-    background: #E9EEF1;
-    border-top: 1px solid #E9EEF1;
-    border-bottom: 1px solid #E9EEF1;
-    height: auto;
-	max-width: 50%;
-	min-width: 30%;
-    padding: 8px;
+.expandedImageContainerInner {
+    display: flex;
+    align-items: flex-start;
+	max-width: 300px;
+    max-height: 210px;
+}
+
+.expandedImageContainer img {
+    max-height: 210px;
+}
+
+thead {
+	font-weight: bold;
 }
 
 .codeblock {
diff --git a/src/ui/src/core_components/content/CoreMessage.vue b/src/ui/src/core_components/content/CoreMessage.vue
index ec491079e..a62245083 100644
--- a/src/ui/src/core_components/content/CoreMessage.vue
+++ b/src/ui/src/core_components/content/CoreMessage.vue
@@ -1,15 +1,15 @@
 <docs lang="md">
-    When working with operations that can succeed or fail, _Message_ can be useful. You can reserve a state element to be used for the outcome of the operation; empty messages aren't shown, so you can initialise it empty.
-    Then, assign a message when the operation is completed.
+When working with operations that can succeed or fail, _Message_ can be useful. You can reserve a state element to be used for the outcome of the operation; empty messages aren't shown, so you can initialise it empty.
+Then, assign a message when the operation is completed.
 
-    \`\`\`python
-    state["msg"] = ""
+\`\`\`python
+state["msg"] = ""
 
-    if is_ok:
-    	state["msg"] = "+It worked!"
-    else:
-    	state["msg"] = "-It failed"
-    \`\`\`
+if is_ok:
+\ \ state["msg"] = "+It worked!"
+else:
+\ \ state["msg"] = "-It failed"
+\`\`\`
 </docs>
 
 <template>