Refactor RichArtickle styles and Overflow extension: add overflow tex…

…t styling, replace TextStyle with Bold extension, and adjust layout for improved responsiveness

apps/hub/app/components/RichArtickle.vue

@@ -63,4 +63,11 @@ const contentEditor = useEditor({
   height: 0;
   pointer-events: none;
 }
+
+// Oveflowing text
+
+.ProseMirror p span.overflow {
+  color: var(--warning-100);
+  text-decoration: line-through;
+}
 </style>

apps/hub/app/composables/useTiptap/extensions/Overflow.ts

@@ -1,8 +1,8 @@
-import TextStyle from '@tiptap/extension-placeholder'
+import Bold from '@tiptap/extension-bold'
 import { mergeAttributes } from '@tiptap/core'
 import type { Editor } from '@tiptap/core'
 
-export const Overflow = TextStyle.extend({
+export const Overflow = Bold.extend({
   name: 'overflow',
   renderHTML({ HTMLAttributes }) {
     return ['span', mergeAttributes(HTMLAttributes, { class: 'overflow' }), 0]
@@ -39,6 +39,8 @@ export function validateOverflow(editor: Editor, props: { limit: number }) {
   const limit = current.start + props.limit
   const inner = Math.min(current.end, limit)
 
+  console.log('current', schema.marks)
+
   const overflowMark = schema.marks.overflow.create()
 
   removeMark(current.start, inner, overflowMark)

apps/hub/app/layouts/default.vue

@@ -71,14 +71,11 @@ onKeyStroke('Escape', () => {
   flex-direction: column;
   justify-content: center;
   place-items: center;
+  gap: var(--space-4);
 
   width: 80dvw;
   max-width: 1900px;
-  gap: var(--space-4);
-
   min-height: 100vh;
-  padding-bottom: var(--space-5);
-  background-color: var(--base-20);
 
   @media (max-width: 800px) {
     width: 100dvw;