diff --git a/src/web/MarkdownTextInput.css b/src/web/MarkdownTextInput.css
index 0b73db96..eb266f79 100644
--- a/src/web/MarkdownTextInput.css
+++ b/src/web/MarkdownTextInput.css
@@ -18,10 +18,14 @@
   display: none;
 }
 
-.react-native-live-markdown-input-singleline span[data-type="text"] {
+.react-native-live-markdown-input-singleline span[data-type='text'] {
   vertical-align: middle;
 }
 
+.react-native-live-markdown-input-singleline > p:last-child {
+  padding-right: 1px !important;
+}
+
 .react-native-live-markdown-input-singleline:empty::before,
 .react-native-live-markdown-input-multiline:empty::before {
   pointer-events: none;
diff --git a/src/web/utils/blockUtils.ts b/src/web/utils/blockUtils.ts
index e9837569..580b50b0 100644
--- a/src/web/utils/blockUtils.ts
+++ b/src/web/utils/blockUtils.ts
@@ -4,8 +4,9 @@ import type {PartialMarkdownStyle} from '../../styleUtils';
 import {addInlineImagePreview} from '../inputElements/inlineImage';
 import type {NodeType, TreeNode} from './treeUtils';
 
-function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownStyle: PartialMarkdownStyle) {
+function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownStyle: PartialMarkdownStyle, isMultiline = true) {
   const node = targetElement;
+
   switch (type) {
     case 'line':
       Object.assign(node.style, {
@@ -74,6 +75,12 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
         position: 'relative',
       });
       break;
+    case 'text':
+      if (!isMultiline) {
+        Object.assign(node.style, {backgroundColor: targetElement.parentElement?.style.backgroundColor});
+        Object.assign(targetElement.parentElement?.style ?? {}, {backgroundColor: 'transparent'});
+      }
+      break;
     default:
       break;
   }
diff --git a/src/web/utils/parserUtils.ts b/src/web/utils/parserUtils.ts
index 694b6601..869abb9c 100644
--- a/src/web/utils/parserUtils.ts
+++ b/src/web/utils/parserUtils.ts
@@ -87,7 +87,7 @@ function addBrElement(node: TreeNode) {
   return spanNode;
 }
 
-function addTextToElement(node: TreeNode, text: string) {
+function addTextToElement(node: TreeNode, text: string, isMultiline = true) {
   const lines = text.split('\n');
   lines.forEach((line, index) => {
     if (line !== '') {
@@ -96,6 +96,12 @@ function addTextToElement(node: TreeNode, text: string) {
       span.setAttribute('data-type', 'text');
       span.appendChild(document.createTextNode(line));
       appendNode(span, node, 'text', line.length);
+
+      const parentType = span.parentElement?.dataset.type;
+      if (!isMultiline && parentType && ['pre', 'code', 'mention-here', 'mention-user', 'mention-report'].includes(parentType)) {
+        // this is a fix to background colors being shifted downwards in a singleline input
+        addStyleToBlock(span, 'text', {}, false);
+      }
     }
 
     if (index < lines.length - 1 || (index === 0 && line === '')) {
@@ -208,7 +214,7 @@ function parseRangesToHTMLNodes(
       span.setAttribute('data-type', range.type);
 
       if (!disableInlineStyles) {
-        addStyleToBlock(span, range.type, markdownStyle);
+        addStyleToBlock(span, range.type, markdownStyle, isMultiline);
       }
 
       const spanNode = appendNode(span, currentParentNode, range.type, range.length);
@@ -223,7 +229,7 @@ function parseRangesToHTMLNodes(
         lastRangeEndIndex = range.start;
       } else {
         // adding markdown tag
-        addTextToElement(spanNode, text.substring(range.start, endOfCurrentRange));
+        addTextToElement(spanNode, text.substring(range.start, endOfCurrentRange), isMultiline);
         currentParentNode.element.value = (currentParentNode.element.value || '') + (spanNode.element.value || '');
         lastRangeEndIndex = endOfCurrentRange;
         // tag unnesting and adding text after the tag