happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: make the CodeBlock take all the space on small screens

This commit is contained in:
Dubzer 2024-04-24 03:20:03 +03:00
parent 7f9af9b12c
commit 83b0585170
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/MemoContent/CodeBlock.tsx
View File

@ -58,7 +58,12 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
}, [content]); }, [content]);
return ( 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"> <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> <span className="text-sm font-mono">{formatedLanguage}</span>
{md && <Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />} {md && <Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />}