Fix link menu positioning

Signed-off-by: Julius Härtl <[email protected]>

src/components/MenuBubble.vue

@@ -41,8 +41,8 @@
 					class="menububble__button"
 					:class="{ 'is-active': isActive.link() }"
 					@click="showLinkMenu(getMarkAttrs('link'))">
-					<span v-tooltip="isActive.link() ? 'Update Link' : 'Add Link'" class="icon-link" />
-					<span class="menububble__buttontext">{{ t('text', 'Add link') }}</span>
+					<span class="icon-link" />
+					<span class="menububble__buttontext">{{ isActive.link() ? t('text', 'Update link') : t('text', 'Add link') }}</span>
 				</button>
 			</template>
 		</div>
@@ -107,11 +107,15 @@ export default {
 		box-shadow: 0 1px 5px var(--color-box-shadow);
 		border-radius: var(--border-radius);
 		padding: 0;
-		margin-bottom: 0.4rem;
+		margin-bottom: 0;
+		margin-left: 10px;
 		visibility: hidden;
 		opacity: 0;
 		transform: translateX(-50%);
 		transition: opacity 0.2s, visibility 0.2s;
+		// We need a fixed width here since tiptap doesn't recalculate the left position on resize
+		width: 180px;
+		height: 40px;
 
 		&.is-active {
 			opacity: 1;
@@ -120,8 +124,9 @@ export default {
 
 		&__button {
 			display: block;
+			flex-grow: 1;
 			border: 0;
-			padding: 0.3rem 0.7rem;
+			padding: 0.9rem 0.7rem;
 			margin: 0;
 			margin-right: 0.2rem;
 			border-radius: var(--border-radius);

src/views/RichWorkspace.vue

@@ -166,7 +166,7 @@ export default {
 
 <style lang="scss" scoped>
 	#rich-workspace {
-		padding: 0 60px;
+		padding: 0 50px;
 		/* Slightly reduce vertical space */
 		margin-bottom: -24px;
 		text-align: left;
@@ -210,6 +210,7 @@ export default {
 	#rich-workspace::v-deep #editor {
 		overflow: scroll !important;
 		max-height: 50vh;
+		padding-left: 10px;
 	}
 
 	#rich-workspace::v-deep #editor-wrapper .ProseMirror {