From cebddef01648d1ef34128ebf9b990c0e03a1cef8 Mon Sep 17 00:00:00 2001
From: JulioSergioFS <julio.silva@autonomylogic.com>
Date: Wed, 3 Jun 2026 20:31:20 -0300
Subject: [PATCH 1/4] fix: change text

---
 .../_features/[workspace]/source-control/stash-section.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/components/_features/[workspace]/source-control/stash-section.tsx b/src/frontend/components/_features/[workspace]/source-control/stash-section.tsx
index d9b6bd06f..d0b9bfe6d 100644
--- a/src/frontend/components/_features/[workspace]/source-control/stash-section.tsx
+++ b/src/frontend/components/_features/[workspace]/source-control/stash-section.tsx
@@ -91,7 +91,7 @@ export function StashSection({ projectId }: StashSectionProps) {
       else await versionControl.applyStash(projectId, stash.hash)
       await reloadProject()
       await fetchStashes()
-      toast({ title: pop ? 'Stash popped' : 'Stash applied', variant: 'default' })
+      toast({ title: pop ? 'Stash applied & removed' : 'Stash applied', variant: 'default' })
     } catch (error) {
       if (error instanceof StashConflictError) {
         toast({
@@ -100,7 +100,7 @@ export function StashSection({ projectId }: StashSectionProps) {
           variant: 'fail',
         })
       } else {
-        toast({ title: pop ? 'Failed to pop stash' : 'Failed to apply stash', variant: 'fail' })
+        toast({ title: pop ? 'Failed to apply & remove stash' : 'Failed to apply stash', variant: 'fail' })
       }
     } finally {
       setBusyRef(null)
@@ -184,7 +184,7 @@ export function StashSection({ projectId }: StashSectionProps) {
                       className='flex cursor-pointer items-center gap-1 rounded-md bg-blue-500 px-2 py-1 text-[11px] font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50'
                     >
                       <ChevronDown className='h-3 w-3' />
-                      Pop
+                      Apply & remove
                     </button>
                     <button
                       onClick={() => setDropTarget(stash)}

From 71f9dd9199ac6ec15b79b3c2ea4aa1bb789c428d Mon Sep 17 00:00:00 2001
From: JulioSergioFS <julio.silva@autonomylogic.com>
Date: Wed, 3 Jun 2026 21:27:33 -0300
Subject: [PATCH 2/4] fix: port fix fork in not owner project

---
 .../branches/branch-switcher-popover.tsx      | 22 ++++++---
 .../create-element/element-card/index.tsx     | 18 ++-----
 .../[workspace]/editor/graphical/index.tsx    | 10 ++--
 .../[workspace]/editor/monaco/index.tsx       | 16 +++----
 .../_molecules/project-tree/index.tsx         | 47 ++++++++-----------
 .../modals/read-only-project-modal.tsx        |  9 +++-
 6 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/frontend/components/_features/[workspace]/branches/branch-switcher-popover.tsx b/src/frontend/components/_features/[workspace]/branches/branch-switcher-popover.tsx
index 2f323691f..1b14499fe 100644
--- a/src/frontend/components/_features/[workspace]/branches/branch-switcher-popover.tsx
+++ b/src/frontend/components/_features/[workspace]/branches/branch-switcher-popover.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type { Branch } from '../../../../../middleware/shared/ports/version-control-port'
 import { useVersionControl } from '../../../../../middleware/shared/providers'
+import { useOpenPLCStore } from '../../../../store'
 import { cn } from '../../../../utils/cn'
 import { CreateBranchPopover } from './create-branch-popover'
 
@@ -28,6 +29,10 @@ export function BranchSwitcherPopover({
   onMerge,
 }: BranchSwitcherPopoverProps) {
   const versionControl = useVersionControl()
+  // Read-only projects (no edit permission) can still switch/browse branches,
+  // but the write actions (merge, delete, create branch) are removed entirely
+  // — there's nothing to surface for a user who can't persist them.
+  const isReadOnly = useOpenPLCStore((s) => s.workspace.isReadOnly)
   const [branches, setBranches] = useState<Branch[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const [filter, setFilter] = useState('')
@@ -185,7 +190,9 @@ export function BranchSwitcherPopover({
                     default
                   </span>
                 )}
-                {/* Actions menu (3 dots) — reveals merge + delete on hover. */}
+                {/* Actions menu (3 dots) — reveals merge + delete on hover.
+                    Hidden in read-only: a non-owner can't merge or delete. */}
+                {!isReadOnly && (
                 <div className='shrink-0' data-branch-actions>
                   <DropdownMenu.Root>
                     <DropdownMenu.Trigger asChild>
@@ -265,16 +272,19 @@ export function BranchSwitcherPopover({
                     </DropdownMenu.Portal>
                   </DropdownMenu.Root>
                 </div>
+                )}
               </div>
             )
           })}
         </div>
 
-        {/* Create new branch */}
-        <div className='px-2 pb-2'>
-          <div className='mb-1 h-[1px] w-full bg-neutral-200 dark:!bg-neutral-850' />
-          <CreateBranchPopover projectId={projectId} onCloseParent={handleClose} />
-        </div>
+        {/* Create new branch — hidden in read-only (a non-owner can't create). */}
+        {!isReadOnly && (
+          <div className='px-2 pb-2'>
+            <div className='mb-1 h-[1px] w-full bg-neutral-200 dark:!bg-neutral-850' />
+            <CreateBranchPopover projectId={projectId} onCloseParent={handleClose} />
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/src/frontend/components/_features/[workspace]/create-element/element-card/index.tsx b/src/frontend/components/_features/[workspace]/create-element/element-card/index.tsx
index 6ec0ae8e7..5950eef62 100644
--- a/src/frontend/components/_features/[workspace]/create-element/element-card/index.tsx
+++ b/src/frontend/components/_features/[workspace]/create-element/element-card/index.tsx
@@ -128,20 +128,16 @@ const ElementCard = (props: ElementCardProps): ReactNode => {
     serverActions: { create: createServer },
     remoteDeviceActions: { create: createRemoteDevice },
     deviceAvailableOptions: { availableBoards },
-    modalActions: { openModal },
   } = useOpenPLCStore()
-  const isReadOnly = useOpenPLCStore((state) => state.workspace.isReadOnly)
   const deviceBoard = useOpenPLCStore((state) => state.deviceDefinitions.configuration.deviceBoard)
   const [isOpen, setIsOpen] = useState(false)
 
-  // Read-only ⇒ the create-element popover/menu just routes to the
-  // fork-or-cancel modal so the user knows why the affordance exists
-  // but can't make changes that wouldn't persist.
+  // Read-only projects (no edit permission) can still create POUs / data types
+  // / servers / devices in memory — the create actions only mutate the store,
+  // they don't persist. Nothing reaches the backend until an explicit Save
+  // (Ctrl+S), which routes through the fork modal. So the popover opens
+  // normally here.
   const handleOpen = (next: boolean) => {
-    if (next && isReadOnly) {
-      openModal('read-only-project')
-      return
-    }
     setIsOpen(next)
   }
 
@@ -231,10 +227,6 @@ const ElementCard = (props: ElementCardProps): ReactNode => {
   }
 
   const handleMouseEnter = () => {
-    if (isReadOnly) {
-      openModal('read-only-project')
-      return
-    }
     setIsOpen(true)
   }
 
diff --git a/src/frontend/components/_features/[workspace]/editor/graphical/index.tsx b/src/frontend/components/_features/[workspace]/editor/graphical/index.tsx
index 9e42c9a9e..ee3f88a48 100644
--- a/src/frontend/components/_features/[workspace]/editor/graphical/index.tsx
+++ b/src/frontend/components/_features/[workspace]/editor/graphical/index.tsx
@@ -20,7 +20,7 @@ type GraphicalEditorProps = ComponentPropsWithoutRef<'div'> & {
   isActive?: boolean
 }
 
-const GraphicalEditor = ({ name, language, readOnly, isActive = true }: GraphicalEditorProps) => {
+const GraphicalEditor = ({ name, language, isActive = true }: GraphicalEditorProps) => {
   const editorComponents = {
     sfc: SfcEditor,
     fbd: FbdEditor,
@@ -29,11 +29,15 @@ const GraphicalEditor = ({ name, language, readOnly, isActive = true }: Graphica
 
   const EditorComponent = editorComponents[language]
 
+  // Read-only projects (no edit permission) stay fully interactive: the user
+  // can add/remove blocks and rewire the diagram in memory. Nothing persists
+  // until an explicit Save (Ctrl+S), which routes through the fork modal. The
+  // `readOnly` prop is intentionally ignored here — we no longer overlay the
+  // editor to block interaction.
   return (
     <GraphicalEditorActiveProvider pouName={name} isActive={isActive}>
       <div className='relative h-full w-full overflow-y-auto'>
-        {readOnly && <div className='absolute inset-0 z-10 cursor-not-allowed' title='Read-only' />}
-        <div className={`h-full w-full${readOnly ? ' pointer-events-none' : ''}`}>
+        <div className='h-full w-full'>
           <EditorComponent />
         </div>
       </div>
diff --git a/src/frontend/components/_features/[workspace]/editor/monaco/index.tsx b/src/frontend/components/_features/[workspace]/editor/monaco/index.tsx
index 15cfda836..50f537fe9 100644
--- a/src/frontend/components/_features/[workspace]/editor/monaco/index.tsx
+++ b/src/frontend/components/_features/[workspace]/editor/monaco/index.tsx
@@ -143,7 +143,6 @@ const MonacoEditor = (props: monacoEditorProps): ReturnType<typeof PrimitiveEdit
     workspace: {
       systemConfigs: { shouldUseDarkMode },
       isDebuggerVisible,
-      isReadOnly,
       fbSelectedInstance,
       fbDebugInstances,
     },
@@ -429,13 +428,14 @@ const MonacoEditor = (props: monacoEditorProps): ReturnType<typeof PrimitiveEdit
     return () => disposable.dispose()
   }, [editorMounted])
 
-  // Update readOnly when debugger visibility or project read-only flag changes.
-  // Debugger visibility forces read-only for safety; the project's own
-  // read-only flag (no edit permission) does the same so users browsing
-  // someone else's project can't make local modifications they couldn't save.
+  // Update readOnly when debugger visibility changes. Debugger visibility
+  // forces read-only for safety. A project's own read-only flag (no edit
+  // permission) does NOT lock the editor: users browsing someone else's
+  // project can edit text freely in memory; the explicit Save (Ctrl+S)
+  // routes through the fork modal instead of persisting.
   useEffect(() => {
-    editorRef.current?.updateOptions({ readOnly: isDebuggerVisible || isReadOnly })
-  }, [isDebuggerVisible, isReadOnly])
+    editorRef.current?.updateOptions({ readOnly: isDebuggerVisible })
+  }, [isDebuggerVisible])
 
   // Apply programmatic cursor jumps (e.g. clicking a compile error in
   // the console) to an already-mounted editor.  The onMount path
@@ -1240,7 +1240,7 @@ void loop()
   const monacoEditorUserOptions: monacoEditorOptionsType = {
     minimap: { enabled: false },
     dropIntoEditor: { enabled: true },
-    readOnly: isDebuggerVisible || isReadOnly,
+    readOnly: isDebuggerVisible,
     // Lock indentation to 4 spaces across every language Monaco
     // hosts (ST / IL / Python / C++).  Without this Monaco's
     // `detectIndentation` heuristic kicks in on the existing model
diff --git a/src/frontend/components/_molecules/project-tree/index.tsx b/src/frontend/components/_molecules/project-tree/index.tsx
index 3014af774..a151209c1 100644
--- a/src/frontend/components/_molecules/project-tree/index.tsx
+++ b/src/frontend/components/_molecules/project-tree/index.tsx
@@ -262,7 +262,6 @@ const ProjectTreeExpandableLeaf = ({
     },
     workspace: { selectedProjectTreeLeaf, isDebuggerVisible, isReadOnly },
     workspaceActions: { setSelectedProjectTreeLeaf },
-    modalActions: { openModal },
     remoteDeviceActions: { deleteRequest: deleteRemoteDeviceRequest, rename: renameRemoteDevice },
     fileActions: { getFile },
   } = useOpenPLCStore()
@@ -320,28 +319,25 @@ const ProjectTreeExpandableLeaf = ({
 
   const popoverOptions = useMemo(
     () => {
-      const guard = (real: () => void) => () => {
-        if (isReadOnly) {
-          openModal('read-only-project')
-          return
-        }
-        real()
-      }
+      // Read-only ⇒ no file-level actions. Rename/Delete mutate the repo
+      // (rename auto-persists, delete removes the file), so they're removed
+      // entirely rather than funnelled to the fork modal.
+      if (isReadOnly) return []
       return [
         {
           name: 'Rename',
-          onClick: guard(() => setIsEditing(true)),
+          onClick: () => setIsEditing(true),
           icon: <PencilIcon className='h-4 w-4 stroke-brand dark:stroke-brand-light' />,
         },
         {
           name: 'Delete',
-          onClick: guard(() => handleDeleteFile()),
+          onClick: () => handleDeleteFile(),
           icon: <CloseIcon className='h-4 w-4 stroke-brand dark:stroke-brand-light' />,
         },
       ]
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [label, isReadOnly, openModal],
+    [label, isReadOnly],
   )
 
   return (
@@ -398,6 +394,7 @@ const ProjectTreeExpandableLeaf = ({
           )}
         </div>
 
+        {popoverOptions.length > 0 && (
         <Popover.Root open={isPopoverOpen && !isDebuggerVisible} onOpenChange={setPopoverOpen}>
           <Popover.Trigger
             disabled={isDebuggerVisible}
@@ -443,6 +440,7 @@ const ProjectTreeExpandableLeaf = ({
             </Popover.Content>
           </Popover.Portal>
         </Popover.Root>
+        )}
       </div>
 
       {children && isExpanded && <ul className='list-none p-0 pl-4'>{children}</ul>}
@@ -517,7 +515,6 @@ const ProjectTreeLeaf = ({
     },
     workspace: { selectedProjectTreeLeaf, isDebuggerVisible, isReadOnly },
     workspaceActions: { setSelectedProjectTreeLeaf },
-    modalActions: { openModal },
     pouActions: { deleteRequest: deletePouRequest, rename: renamePou, duplicate: duplicatePou },
     datatypeActions: { deleteRequest: deleteDatatypeRequest, rename: renameDatatype, duplicate: duplicateDatatype },
     serverActions: { deleteRequest: deleteServerRequest, rename: renameServer },
@@ -742,35 +739,29 @@ const ProjectTreeLeaf = ({
 
   const handleLabel = useCallback((label: string | undefined) => unsavedLabel(label, associatedFile), [associatedFile])
   const popoverOptions = useMemo(() => {
-    // Read-only ⇒ every write action funnels into the fork modal.  We
-    // still surface the menu items so the affordance is discoverable
-    // (the user can read what's there), but each click routes through
-    // the modal instead of the underlying handler.
-    const guard = (real: () => void) => () => {
-      if (isReadOnly) {
-        openModal('read-only-project')
-        return
-      }
-      real()
-    }
+    // Read-only ⇒ no file-level actions. Rename, Duplicate and Delete all
+    // mutate the repo (rename and duplicate auto-persist, delete removes the
+    // file), so the whole context menu is removed rather than funnelled to
+    // the fork modal. In-place editing of the file's contents stays allowed.
+    if (isReadOnly) return []
     return [
       {
         name: 'Rename',
-        onClick: guard(() => setIsEditing(true)),
+        onClick: () => setIsEditing(true),
         icon: <PencilIcon className='h-4 w-4 stroke-brand dark:stroke-brand-light' />,
       },
       {
         name: 'Duplicate',
-        onClick: guard(() => void handleDuplicateFile()),
+        onClick: () => void handleDuplicateFile(),
         icon: <DuplicateIcon className='h-4 w-4 stroke-brand dark:stroke-brand-light' />,
       },
       {
         name: 'Delete',
-        onClick: guard(() => handleDeleteFile()),
+        onClick: () => handleDeleteFile(),
         icon: <CloseIcon className='h-4 w-4 stroke-brand dark:stroke-brand-light' />,
       },
     ]
-  }, [handleDeleteFile, handleDuplicateFile, setIsEditing, isReadOnly, openModal])
+  }, [handleDeleteFile, handleDuplicateFile, setIsEditing, isReadOnly])
 
   useEffect(() => {
     if (isEditing && inputNameRef.current) {
@@ -819,7 +810,7 @@ const ProjectTreeLeaf = ({
         </span>
       )}
 
-      {leafLang === 'devPin' || leafLang === 'devConfig' ? null : (
+      {leafLang === 'devPin' || leafLang === 'devConfig' || popoverOptions.length === 0 ? null : (
         <Popover.Root open={isPopoverOpen && !isDebuggerVisible} onOpenChange={setPopoverOpen}>
           <Popover.Trigger
             disabled={isDebuggerVisible}
diff --git a/src/frontend/components/_organisms/modals/read-only-project-modal.tsx b/src/frontend/components/_organisms/modals/read-only-project-modal.tsx
index f8097bcd4..2ed07f6ee 100644
--- a/src/frontend/components/_organisms/modals/read-only-project-modal.tsx
+++ b/src/frontend/components/_organisms/modals/read-only-project-modal.tsx
@@ -114,7 +114,14 @@ const ReadOnlyProjectModal = () => {
         onOpenChange('read-only-project', open)
       }}
     >
-      <ModalContent className='flex !h-auto !max-h-[80vh] !w-[480px] select-none flex-col gap-4 p-6'>
+      {/*
+        Base ModalContent centers via `inset-0 m-auto h-[500px]`. Overriding only the
+        height to `h-auto` leaves `inset-0` in place — with both top:0 and bottom:0 the
+        box is over-constrained and CSS stretches it to fill `max-h`, hence the giant
+        empty modal. Switch this modal to translate-centering (`inset-auto` + left/top
+        1/2 + -translate-1/2) so the height hugs the content instead.
+      */}
+      <ModalContent className='flex !inset-auto !left-1/2 !top-1/2 !m-0 !h-auto !max-h-[85vh] !w-[480px] !-translate-x-1/2 !-translate-y-1/2 select-none flex-col gap-4 overflow-y-auto p-6'>
         {step === 'intro' ? (
           <>
             <ModalTitle className='text-lg font-semibold'>This project is read-only</ModalTitle>

From 131e1cf04f8cc1bfc8b6f4e11c8e25baf4b36f99 Mon Sep 17 00:00:00 2001
From: JulioSergioFS <julio.silva@autonomylogic.com>
Date: Wed, 3 Jun 2026 21:42:23 -0300
Subject: [PATCH 3/4] fix: add  web editor changes

---
 .../[workspace]/source-control/commit-details.tsx         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/_features/[workspace]/source-control/commit-details.tsx b/src/frontend/components/_features/[workspace]/source-control/commit-details.tsx
index edb1cc207..f4f0979c4 100644
--- a/src/frontend/components/_features/[workspace]/source-control/commit-details.tsx
+++ b/src/frontend/components/_features/[workspace]/source-control/commit-details.tsx
@@ -20,6 +20,8 @@ export function CommitDetails({ commit, projectId }: CommitDetailsProps) {
     project: {
       meta: { path: storedProjectId },
     },
+    workspace: { isReadOnly },
+    modalActions: { openModal },
     sharedWorkspaceActions,
   } = useOpenPLCStore()
   const projectPort = useProject()
@@ -171,7 +173,11 @@ export function CommitDetails({ commit, projectId }: CommitDetailsProps) {
           View All Files
         </button>
         <button
-          onClick={() => setShowRestoreModal(true)}
+          // Restore overwrites the working tree from a past commit — a write
+          // action. In read-only (no edit permission) route straight to the
+          // fork modal instead of the restore confirmation, same as Commit/
+          // Stash/Discard.
+          onClick={() => (isReadOnly ? openModal('read-only-project') : setShowRestoreModal(true))}
           className='w-full rounded-md bg-neutral-100 px-3 py-1.5 text-xs font-medium text-neutral-700 transition-colors duration-150 hover:bg-yellow-50 hover:text-yellow-700 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-yellow-900/30 dark:hover:text-yellow-400'
         >
           Restore to This Version

From 164d9325d10e5789508036e0db9afd4af4d2dcee Mon Sep 17 00:00:00 2001
From: JulioSergioFS <julio.silva@autonomylogic.com>
Date: Wed, 3 Jun 2026 21:50:27 -0300
Subject: [PATCH 4/4] fix: prettier

---
 .../branches/branch-switcher-popover.tsx      | 144 +++++++++---------
 .../_molecules/project-tree/index.tsx         |  82 +++++-----
 .../modals/read-only-project-modal.tsx        |   2 +-
 3 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/src/frontend/components/_features/[workspace]/branches/branch-switcher-popover.tsx b/src/frontend/components/_features/[workspace]/branches/branch-switcher-popover.tsx
index 1b14499fe..c68bd0e28 100644
--- a/src/frontend/components/_features/[workspace]/branches/branch-switcher-popover.tsx
+++ b/src/frontend/components/_features/[workspace]/branches/branch-switcher-popover.tsx
@@ -193,85 +193,85 @@ export function BranchSwitcherPopover({
                 {/* Actions menu (3 dots) — reveals merge + delete on hover.
                     Hidden in read-only: a non-owner can't merge or delete. */}
                 {!isReadOnly && (
-                <div className='shrink-0' data-branch-actions>
-                  <DropdownMenu.Root>
-                    <DropdownMenu.Trigger asChild>
-                      <button
-                        className='rounded p-0.5 opacity-0 transition-opacity hover:bg-neutral-200 group-hover:opacity-100 dark:hover:bg-neutral-800'
-                        title='More actions'
-                      >
-                        <svg
-                          className='h-3.5 w-3.5 text-neutral-500 dark:text-neutral-400'
-                          viewBox='0 0 16 16'
-                          fill='currentColor'
-                        >
-                          <path d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z' />
-                        </svg>
-                      </button>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Portal>
-                      <DropdownMenu.Content
-                        side='right'
-                        align='start'
-                        sideOffset={4}
-                        onCloseAutoFocus={(e) => e.preventDefault()}
-                        className='z-[60] min-w-[140px] overflow-hidden rounded-md border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-900'
-                      >
-                        <DropdownMenu.Item
-                          disabled={isActive}
-                          onSelect={(e) => {
-                            e.preventDefault()
-                            if (isActive) return
-                            onMerge(branch)
-                            handleClose()
-                          }}
-                          title={isActive ? 'Cannot merge a branch into itself' : undefined}
-                          className={cn(
-                            'flex select-none items-center gap-2 px-3 py-1.5 text-xs outline-none',
-                            isActive
-                              ? 'cursor-not-allowed text-neutral-400 dark:text-neutral-600'
-                              : 'cursor-pointer text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800',
-                          )}
+                  <div className='shrink-0' data-branch-actions>
+                    <DropdownMenu.Root>
+                      <DropdownMenu.Trigger asChild>
+                        <button
+                          className='rounded p-0.5 opacity-0 transition-opacity hover:bg-neutral-200 group-hover:opacity-100 dark:hover:bg-neutral-800'
+                          title='More actions'
                         >
                           <svg
-                            className={cn(
-                              'h-3.5 w-3.5',
-                              isActive ? 'text-neutral-400 dark:text-neutral-600' : 'text-blue-500',
-                            )}
+                            className='h-3.5 w-3.5 text-neutral-500 dark:text-neutral-400'
                             viewBox='0 0 16 16'
                             fill='currentColor'
                           >
-                            <path d='M5 3.254V3.25v.005a.75.75 0 1 1 0-.005v.004zm.45 1.9a2.25 2.25 0 1 0-1.95.218v5.256a2.25 2.25 0 1 0 1.5 0V7.123A5.735 5.735 0 0 0 9.25 9h1.378a2.251 2.251 0 1 0 0-1.5H9.25a4.25 4.25 0 0 1-3.8-2.346zM12.75 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-8.5 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z' />
+                            <path d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z' />
                           </svg>
-                          <span>
-                            Merge <span className='font-mono'>{branch.name}</span> into{' '}
-                            <span className='font-mono'>{currentBranchName}</span>
-                          </span>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          disabled={branch.isDefault}
-                          onSelect={(e) => {
-                            e.preventDefault()
-                            if (branch.isDefault) return
-                            onDelete(branch)
-                          }}
-                          title={branch.isDefault ? 'Cannot delete the default branch' : undefined}
-                          className={cn(
-                            'flex select-none items-center gap-2 px-3 py-1.5 text-xs outline-none',
-                            branch.isDefault
-                              ? 'cursor-not-allowed text-neutral-400 dark:text-neutral-600'
-                              : 'cursor-pointer text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40',
-                          )}
+                        </button>
+                      </DropdownMenu.Trigger>
+                      <DropdownMenu.Portal>
+                        <DropdownMenu.Content
+                          side='right'
+                          align='start'
+                          sideOffset={4}
+                          onCloseAutoFocus={(e) => e.preventDefault()}
+                          className='z-[60] min-w-[140px] overflow-hidden rounded-md border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-900'
                         >
-                          <svg className='h-3.5 w-3.5' viewBox='0 0 16 16' fill='currentColor'>
-                            <path d='M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25ZM4.005 5.073a.75.75 0 0 1 .673.627l.79 5.532a.75.75 0 0 0 .742.643h3.58a.75.75 0 0 0 .742-.643l.79-5.532a.75.75 0 0 1 1.49.214l-.79 5.532A2.25 2.25 0 0 1 9.79 13.5H6.21a2.25 2.25 0 0 1-2.23-1.928l-.79-5.532a.75.75 0 0 1 .626-.867Z' />
-                          </svg>
-                          Delete
-                        </DropdownMenu.Item>
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Portal>
-                  </DropdownMenu.Root>
-                </div>
+                          <DropdownMenu.Item
+                            disabled={isActive}
+                            onSelect={(e) => {
+                              e.preventDefault()
+                              if (isActive) return
+                              onMerge(branch)
+                              handleClose()
+                            }}
+                            title={isActive ? 'Cannot merge a branch into itself' : undefined}
+                            className={cn(
+                              'flex select-none items-center gap-2 px-3 py-1.5 text-xs outline-none',
+                              isActive
+                                ? 'cursor-not-allowed text-neutral-400 dark:text-neutral-600'
+                                : 'cursor-pointer text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800',
+                            )}
+                          >
+                            <svg
+                              className={cn(
+                                'h-3.5 w-3.5',
+                                isActive ? 'text-neutral-400 dark:text-neutral-600' : 'text-blue-500',
+                              )}
+                              viewBox='0 0 16 16'
+                              fill='currentColor'
+                            >
+                              <path d='M5 3.254V3.25v.005a.75.75 0 1 1 0-.005v.004zm.45 1.9a2.25 2.25 0 1 0-1.95.218v5.256a2.25 2.25 0 1 0 1.5 0V7.123A5.735 5.735 0 0 0 9.25 9h1.378a2.251 2.251 0 1 0 0-1.5H9.25a4.25 4.25 0 0 1-3.8-2.346zM12.75 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-8.5 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z' />
+                            </svg>
+                            <span>
+                              Merge <span className='font-mono'>{branch.name}</span> into{' '}
+                              <span className='font-mono'>{currentBranchName}</span>
+                            </span>
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            disabled={branch.isDefault}
+                            onSelect={(e) => {
+                              e.preventDefault()
+                              if (branch.isDefault) return
+                              onDelete(branch)
+                            }}
+                            title={branch.isDefault ? 'Cannot delete the default branch' : undefined}
+                            className={cn(
+                              'flex select-none items-center gap-2 px-3 py-1.5 text-xs outline-none',
+                              branch.isDefault
+                                ? 'cursor-not-allowed text-neutral-400 dark:text-neutral-600'
+                                : 'cursor-pointer text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40',
+                            )}
+                          >
+                            <svg className='h-3.5 w-3.5' viewBox='0 0 16 16' fill='currentColor'>
+                              <path d='M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25ZM4.005 5.073a.75.75 0 0 1 .673.627l.79 5.532a.75.75 0 0 0 .742.643h3.58a.75.75 0 0 0 .742-.643l.79-5.532a.75.75 0 0 1 1.49.214l-.79 5.532A2.25 2.25 0 0 1 9.79 13.5H6.21a2.25 2.25 0 0 1-2.23-1.928l-.79-5.532a.75.75 0 0 1 .626-.867Z' />
+                            </svg>
+                            Delete
+                          </DropdownMenu.Item>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Portal>
+                    </DropdownMenu.Root>
+                  </div>
                 )}
               </div>
             )
diff --git a/src/frontend/components/_molecules/project-tree/index.tsx b/src/frontend/components/_molecules/project-tree/index.tsx
index a151209c1..8f91d0329 100644
--- a/src/frontend/components/_molecules/project-tree/index.tsx
+++ b/src/frontend/components/_molecules/project-tree/index.tsx
@@ -395,51 +395,51 @@ const ProjectTreeExpandableLeaf = ({
         </div>
 
         {popoverOptions.length > 0 && (
-        <Popover.Root open={isPopoverOpen && !isDebuggerVisible} onOpenChange={setPopoverOpen}>
-          <Popover.Trigger
-            disabled={isDebuggerVisible}
-            className={cn(
-              'mr-2 flex h-5 w-5 items-center justify-center rounded-md opacity-0 hover:bg-neutral-200 group-hover:opacity-100 dark:hover:bg-neutral-850',
-              {
-                'bg-neutral-200 opacity-100 dark:bg-neutral-850': isPopoverOpen,
-                'cursor-not-allowed': isDebuggerVisible,
-              },
-            )}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <MoreOptionsIcon className='h-4 w-4' />
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content
-              align='start'
-              side='right'
-              sideOffset={2}
+          <Popover.Root open={isPopoverOpen && !isDebuggerVisible} onOpenChange={setPopoverOpen}>
+            <Popover.Trigger
+              disabled={isDebuggerVisible}
               className={cn(
-                'box z-[100] flex h-fit w-fit min-w-32 flex-col rounded-lg text-xs',
-                'focus:outline-none focus-visible:outline-none',
-                'bg-white text-neutral-1000 dark:bg-neutral-950 dark:text-neutral-300',
+                'mr-2 flex h-5 w-5 items-center justify-center rounded-md opacity-0 hover:bg-neutral-200 group-hover:opacity-100 dark:hover:bg-neutral-850',
+                {
+                  'bg-neutral-200 opacity-100 dark:bg-neutral-850': isPopoverOpen,
+                  'cursor-not-allowed': isDebuggerVisible,
+                },
               )}
               onClick={(e) => e.stopPropagation()}
             >
-              {popoverOptions.map((option, index) => (
-                <div
-                  key={option.name}
-                  className={cn(
-                    'flex w-full cursor-pointer items-center gap-2 px-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-900',
-                    { 'rounded-t-lg': index === 0, 'rounded-b-lg': index === popoverOptions.length - 1 },
-                  )}
-                  onClick={() => {
-                    option.onClick()
-                    setPopoverOpen(false)
-                  }}
-                >
-                  {option.icon}
-                  <p>{option.name}</p>
-                </div>
-              ))}
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
+              <MoreOptionsIcon className='h-4 w-4' />
+            </Popover.Trigger>
+            <Popover.Portal>
+              <Popover.Content
+                align='start'
+                side='right'
+                sideOffset={2}
+                className={cn(
+                  'box z-[100] flex h-fit w-fit min-w-32 flex-col rounded-lg text-xs',
+                  'focus:outline-none focus-visible:outline-none',
+                  'bg-white text-neutral-1000 dark:bg-neutral-950 dark:text-neutral-300',
+                )}
+                onClick={(e) => e.stopPropagation()}
+              >
+                {popoverOptions.map((option, index) => (
+                  <div
+                    key={option.name}
+                    className={cn(
+                      'flex w-full cursor-pointer items-center gap-2 px-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-900',
+                      { 'rounded-t-lg': index === 0, 'rounded-b-lg': index === popoverOptions.length - 1 },
+                    )}
+                    onClick={() => {
+                      option.onClick()
+                      setPopoverOpen(false)
+                    }}
+                  >
+                    {option.icon}
+                    <p>{option.name}</p>
+                  </div>
+                ))}
+              </Popover.Content>
+            </Popover.Portal>
+          </Popover.Root>
         )}
       </div>
 
diff --git a/src/frontend/components/_organisms/modals/read-only-project-modal.tsx b/src/frontend/components/_organisms/modals/read-only-project-modal.tsx
index 2ed07f6ee..1390ce5e4 100644
--- a/src/frontend/components/_organisms/modals/read-only-project-modal.tsx
+++ b/src/frontend/components/_organisms/modals/read-only-project-modal.tsx
@@ -121,7 +121,7 @@ const ReadOnlyProjectModal = () => {
         empty modal. Switch this modal to translate-centering (`inset-auto` + left/top
         1/2 + -translate-1/2) so the height hugs the content instead.
       */}
-      <ModalContent className='flex !inset-auto !left-1/2 !top-1/2 !m-0 !h-auto !max-h-[85vh] !w-[480px] !-translate-x-1/2 !-translate-y-1/2 select-none flex-col gap-4 overflow-y-auto p-6'>
+      <ModalContent className='!inset-auto !left-1/2 !top-1/2 !m-0 flex !h-auto !max-h-[85vh] !w-[480px] !-translate-x-1/2 !-translate-y-1/2 select-none flex-col gap-4 overflow-y-auto p-6'>
         {step === 'intro' ? (
           <>
             <ModalTitle className='text-lg font-semibold'>This project is read-only</ModalTitle>