From c0cbba25220114d2c5d1a7a7dddde20f6fac01a3 Mon Sep 17 00:00:00 2001
From: ganeshKumara <ganeshkumara10@gmail.com>
Date: Sun, 1 Feb 2026 16:00:47 +0530
Subject: [PATCH 1/2] Fully_Responsive-Card-Area

---
 web/src/components/MemoContent/index.tsx      |  2 +-
 .../MemoReactionListView/ReactionSelector.tsx |  2 +-
 web/src/components/MemoView/MemoView.tsx      | 31 ++++++++++++++++++-
 .../components/metadata/AttachmentList.tsx    |  2 +-
 .../components/metadata/RelationList.tsx      |  2 +-
 web/src/components/PreviewImageDialog.tsx     |  2 +-
 6 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index b60ffffe6..2248385aa 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/web/src/components/MemoContent/index.tsx
@@ -35,7 +35,7 @@ const MemoContent = (props: MemoContentProps) => {
   const compactLabel = useCompactLabel(showCompactMode, t as (key: string) => string);
 
   return (
-    <div className={`w-full flex flex-col justify-start items-start text-foreground ${className || ""}`}>
+    <div className={`w-full flex flex-col justify-start items-start text-foreground cursor-default ${className || ""}`}>
       <div
         ref={memoContentContainerRef}
         className={cn(
diff --git a/web/src/components/MemoReactionListView/ReactionSelector.tsx b/web/src/components/MemoReactionListView/ReactionSelector.tsx
index c981bd499..94b9a5198 100644
--- a/web/src/components/MemoReactionListView/ReactionSelector.tsx
+++ b/web/src/components/MemoReactionListView/ReactionSelector.tsx
@@ -40,7 +40,7 @@ const ReactionSelector = (props: Props) => {
         </span>
       </PopoverTrigger>
       <PopoverContent align="center" className="max-w-[90vw] sm:max-w-md">
-        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1 max-h-64 overflow-y-auto">
+        <div className="no-goto grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1 max-h-64 overflow-y-auto">
           {memoRelatedSetting.reactions.map((reactionType) => (
             <button
               type="button"
diff --git a/web/src/components/MemoView/MemoView.tsx b/web/src/components/MemoView/MemoView.tsx
index 9d617b7f8..30161a830 100644
--- a/web/src/components/MemoView/MemoView.tsx
+++ b/web/src/components/MemoView/MemoView.tsx
@@ -38,6 +38,35 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
     openEditor,
     openPreview,
   });
+  // handle onClick to go to details page
+  const handleArticleClick = (e: React.MouseEvent) => {
+    if (e.defaultPrevented) {return}; // prevent if other onClick events are triggered first
+   let target = e.target as HTMLElement | null;
+   // Handle for interactive elements
+   if (target && target.closest && target.closest("a, th, td, span, .no-goto")) {
+     return;
+   }
+   let el = target;
+  while (el) {
+    const cls = el.classList;
+     //Handle for img class items inside memo content
+    if (cls && cls.contains("grid")&& cls.contains("grid-cols-2")) {
+      return;
+    }
+     // Handle map inside memo content
+    if (cls && cls.contains("leaflet-container")) {
+      return;
+    }
+    el = el.parentElement;
+  }
+  // Handle for menuitems(Pin, Edit, Copy, Archive, Delete), dialog and buttons types
+  let role = target?.getAttribute("role");
+  let type = target?.getAttribute("type");
+  if (role === "menuitem"|| role==="dialog" || type === "button") {
+    return;
+  }
+   handleGotoMemoDetailPage();
+ };
 
   const contextValue = useMemo(
     () => ({
@@ -68,7 +97,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
 
   return (
     <MemoViewContext.Provider value={contextValue}>
-      <article className={cn(MEMO_CARD_BASE_CLASSES, className)} ref={cardRef} tabIndex={readonly ? -1 : 0}>
+      <article onClick={handleArticleClick} className={cn(MEMO_CARD_BASE_CLASSES, className)} ref={cardRef} tabIndex={readonly ? -1 : 0}>
         <MemoHeader
           showCreator={props.showCreator}
           showVisibility={props.showVisibility}
diff --git a/web/src/components/MemoView/components/metadata/AttachmentList.tsx b/web/src/components/MemoView/components/metadata/AttachmentList.tsx
index eb976182c..1fb72e692 100644
--- a/web/src/components/MemoView/components/metadata/AttachmentList.tsx
+++ b/web/src/components/MemoView/components/metadata/AttachmentList.tsx
@@ -114,7 +114,7 @@ const AttachmentList = ({ attachments }: AttachmentListProps) => {
 
   return (
     <>
-      <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
+      <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden no-goto">
         <SectionHeader icon={PaperclipIcon} title="Attachments" count={attachments.length} />
 
         <div className="p-2 flex flex-col gap-1">
diff --git a/web/src/components/MemoView/components/metadata/RelationList.tsx b/web/src/components/MemoView/components/metadata/RelationList.tsx
index 4ce02cbda..eb37d108c 100644
--- a/web/src/components/MemoView/components/metadata/RelationList.tsx
+++ b/web/src/components/MemoView/components/metadata/RelationList.tsx
@@ -41,7 +41,7 @@ function RelationList({ relations, currentMemoName, parentPage, className }: Rel
   const activeRelations = isReferencing ? referencingRelations : referencedRelations;
 
   return (
-    <div className={cn("w-full rounded-lg border border-border bg-muted/20 overflow-hidden", className)}>
+    <div className={cn("w-full rounded-lg border border-border bg-muted/20 overflow-hidden no-goto", className)}>
       <SectionHeader
         icon={icon}
         title={isReferencing ? t("common.referencing") : t("common.referenced-by")}
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
index 4787c892e..0d57d0826 100644
--- a/web/src/components/PreviewImageDialog.tsx
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -55,7 +55,7 @@ function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: P
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="!w-[100vw] !h-[100vh] !max-w-[100vw] !max-h-[100vw] p-0 border-0 shadow-none bg-transparent [&>button]:hidden"
+        className="!w-[100vw] !h-[100vh] !max-w-[100vw] !max-h-[100vw] p-0 border-0 shadow-none bg-transparent [&>button]:hidden no-goto"
         aria-describedby="image-preview-description"
       >
         {/* Close button */}

From 057a8995499ce385baa32d6c68afbeb1adc81cb5 Mon Sep 17 00:00:00 2001
From: ganeshKumara <ganeshkumara10@gmail.com>
Date: Sun, 1 Feb 2026 16:19:53 +0530
Subject: [PATCH 2/2] Fully_Responsive-Card-Area

---
 web/src/components/MemoView/MemoView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/MemoView/MemoView.tsx b/web/src/components/MemoView/MemoView.tsx
index 30161a830..70044b5fb 100644
--- a/web/src/components/MemoView/MemoView.tsx
+++ b/web/src/components/MemoView/MemoView.tsx
@@ -62,7 +62,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
   // Handle for menuitems(Pin, Edit, Copy, Archive, Delete), dialog and buttons types
   let role = target?.getAttribute("role");
   let type = target?.getAttribute("type");
-  if (role === "menuitem"|| role==="dialog" || type === "button") {
+  if (role === "menuitem"|| type==="dialog" || type === "button") {
     return;
   }
    handleGotoMemoDetailPage();