From 83b058517056ebc657af232fef2ee2ebd5714c44 Mon Sep 17 00:00:00 2001
From: Dubzer <me@dubzer.dev>
Date: Wed, 24 Apr 2024 03:20:03 +0300
Subject: [PATCH] feat: make the CodeBlock take all the space on small screens

---
 web/src/components/MemoContent/CodeBlock.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index 4c550019c9026..bb3201f6d4096 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -58,7 +58,12 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   }, [content]);
 
   return (
-    <div className="w-full my-1 bg-amber-100 border-l-4 border-amber-400 rounded hover:shadow dark:bg-zinc-600 dark:border-zinc-400 relative">
+    <div
+      className={classNames(
+        "my-1 bg-amber-100 border-l-4 border-amber-400 rounded hover:shadow dark:bg-zinc-600 dark:border-zinc-400 relative",
+        !md && "w-[calc(100%+2rem)] -ml-4",
+      )}
+    >
       <div className="w-full px-2 py-1 flex flex-row justify-between items-center text-amber-500 dark:text-zinc-400">
         <span className="text-sm font-mono">{formatedLanguage}</span>
         {md && <Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />}