Revert "fix(ui): improve routine properties panel and history UX" (#5723)

## Thinking Path

> - Paperclip orchestrates AI agents through visible, governable task
and routine workflows.
> - The routines UI includes the routine detail page, properties panel,
history tab, and shared sidebar components.
> - PR #5703 changed that workflow by widening the routine properties
panel and moving revision inspection/comparison into dialogs.
> - The product direction for that change is being paused for now, so
the safest path is a direct revert instead of partial edits.
> - This pull request reverts merge commit
`74cb560c41305ac3283067d1ec8d3060ffdc28cb` from #5703.
> - The benefit is restoring the prior routines UI behavior while
keeping the revert easy to review and re-apply later if needed.

## What Changed

- Reverted #5703: `fix(ui): improve routine properties panel and history
UX`.
- Restored the previous routine properties panel sizing, panel context
API, routine detail layout, and routine history rendering behavior.
- Removed the reverted sidebar pane test additions and restored the
previous focused routine history test expectations.

## Verification

- `git diff --check origin/master..HEAD`
- `pnpm vitest run ui/src/components/RoutineHistoryTab.test.tsx`
- `pnpm --filter @paperclipai/ui typecheck`

### Screenshots

This is a direct revert of #5703. The visual state after this PR
corresponds to the "Before" screenshots from #5703, and the state being
removed corresponds to the "After" screenshots from #5703.

#### Trigger Panel Width

| Before this revert | After this revert |
| --- | --- |
| <img width="1742" height="1288" alt="triggers-before-this-revert"
src="https://github.com/user-attachments/assets/9e818978-283c-49a3-9401-879be550c67b"
/> | <img width="1741" height="1289" alt="triggers-after-this-revert"
src="https://github.com/user-attachments/assets/2a391769-c355-4219-8da3-d1ea18698430"
/> |

#### History Panel

| Before this revert | After this revert |
| --- | --- |
| <img width="1741" height="1290" alt="history-before-this-revert"
src="https://github.com/user-attachments/assets/4c139238-8494-4438-89e1-4277d05bc3aa"
/> | <img width="1739" height="1289" alt="history-after-this-revert"
src="https://github.com/user-attachments/assets/eaea4f3d-bb65-4af6-b67f-3ba3026fe0c9"
/> |

## Risks

- Low technical risk: this is a clean Git revert of a recently merged
UI-only PR.
- Product risk: the routine properties panel and revision history return
to the older, narrower workflow that #5703 was improving.
- Re-application risk: future work that wants the #5703 behavior back
should re-apply it deliberately rather than cherry-picking around this
revert.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex, GPT-5 coding agent, tool-enabled with local shell and
GitHub CLI access. Context window size was not exposed in this session.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

Co-authored-by: Paperclip <noreply@paperclip.ing>

ui/src/components/PropertiesPanel.tsx

@@ -1,59 +1,29 @@
 import { X } from "lucide-react";
 import { usePanel } from "../context/PanelContext";
 import { Button } from "@/components/ui/button";
-import { ResizableSidebarPane } from "./ResizableSidebarPane";
-
-const PROPERTIES_PANEL_DEFAULT = 320;
-const PROPERTIES_PANEL_MIN = 320;
-const PROPERTIES_PANEL_MAX = 640;
-const PROPERTIES_PANEL_STORAGE_KEY = "paperclip.properties.width";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export function PropertiesPanel() {
-  const { panelContent, panelLayout, panelVisible, setPanelVisible } = usePanel();
+  const { panelContent, panelVisible, setPanelVisible } = usePanel();
 
   if (!panelContent) return null;
 
-  const storageKey = panelLayout.storageKey ?? PROPERTIES_PANEL_STORAGE_KEY;
-  const defaultWidth = panelLayout.defaultWidth ?? PROPERTIES_PANEL_DEFAULT;
-  const minWidth = panelLayout.minWidth ?? PROPERTIES_PANEL_MIN;
-  const maxWidth = panelLayout.maxWidth ?? PROPERTIES_PANEL_MAX;
-  const compactBelowViewport = panelLayout.compactBelowViewport;
-  const compactMaxWidth = panelLayout.compactMaxWidth;
-
   return (
-    <aside className="hidden md:flex border-l border-border bg-card shrink-0 h-full">
-      <ResizableSidebarPane
-        // Remount when the layout key changes so the stored width is re-read fresh.
-        key={storageKey}
-        open={panelVisible}
-        resizable
-        side="right"
-        storageKey={storageKey}
-        defaultWidth={defaultWidth}
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        compactBelowViewport={compactBelowViewport}
-        compactMaxWidth={compactMaxWidth}
-        widthVariable="--properties-panel-width"
-        className="h-full"
-      >
-        <div className="flex h-full w-full flex-col min-h-0">
-          <div className="flex items-center justify-between px-4 py-2 border-b border-border">
-            <span className="text-sm font-medium">Properties</span>
-            <Button
-              variant="ghost"
-              size="icon-xs"
-              onClick={() => setPanelVisible(false)}
-              aria-label="Close properties panel"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-          <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
-            <div className="p-4 min-w-0">{panelContent}</div>
-          </div>
+    <aside
+      className="hidden md:flex border-l border-border bg-card flex-col shrink-0 overflow-hidden transition-[width,opacity] duration-200 ease-in-out h-full"
+      style={{ width: panelVisible ? 320 : 0, opacity: panelVisible ? 1 : 0 }}
+    >
+      <div className="w-80 flex-1 flex flex-col min-w-[320px] min-h-0">
+        <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+          <span className="text-sm font-medium">Properties</span>
+          <Button variant="ghost" size="icon-xs" onClick={() => setPanelVisible(false)}>
+            <X className="h-4 w-4" />
+          </Button>
         </div>
-      </ResizableSidebarPane>
+        <ScrollArea className="flex-1">
+          <div className="p-4">{panelContent}</div>
+        </ScrollArea>
+      </div>
     </aside>
   );
 }