From c012adaa77eb784cfb69054e73d2497287e310e1 Mon Sep 17 00:00:00 2001
From: AI Assistant <ai@architools.local>
Date: Wed, 25 Mar 2026 12:03:24 +0200
Subject: [PATCH] fix: export buttons direct (no dropdown), compact mobile
 cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Export fix:
- Replaced DropdownMenu with direct DXF/GPKG buttons in SelectionToolbar.
  Radix dropdown portals don't work inside fixed z-[110] containers.
  Direct buttons work reliably on all platforms.

Mobile RGI cards:
- Single-row compact layout: icon + nr cerere + solicitant + termen + status
- Smaller icons (3.5), tighter spacing, shorter status labels
- No Card wrapper — lightweight border div for less visual weight

Mobile filters:
- Tighter spacing, smaller labels

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/(portal)/portal/page.tsx              | 92 +++++++++----------
 .../components/selection-toolbar.tsx          | 36 +++-----
 2 files changed, 59 insertions(+), 69 deletions(-)

diff --git a/src/app/(portal)/portal/page.tsx b/src/app/(portal)/portal/page.tsx
index 59e091b..bec0ca4 100644
--- a/src/app/(portal)/portal/page.tsx
+++ b/src/app/(portal)/portal/page.tsx
@@ -788,10 +788,10 @@ function RgiContent() {
       </div>
 
       <Card>
-        <CardContent className="pt-4 space-y-3">
-          <div className="flex items-end gap-3 flex-wrap">
-            <div className="space-y-1">
-              <Label className="text-xs">Judet</Label>
+        <CardContent className="pt-3 sm:pt-4 space-y-2 sm:space-y-3">
+          <div className="flex items-end gap-2 sm:gap-3 flex-wrap">
+            <div className="space-y-0.5 sm:space-y-1">
+              <Label className="text-[11px] sm:text-xs">Judet</Label>
               <Select
                 value={String(countyId)}
                 onValueChange={(v) => setCountyId(parseInt(v, 10))}
@@ -920,56 +920,52 @@ function RgiContent() {
 
       {/* Mobile card view */}
       {!loading && processed.length > 0 && (
-        <div className="space-y-2 sm:hidden">
+        <div className="space-y-1.5 sm:hidden">
           {processed.map((app) => {
             const pk = app.applicationPk;
             const isExpanded = expandedPk === pk;
             const solved = app.hasSolution === 1;
             return (
-              <Card key={pk} className={cn(isExpanded && "ring-1 ring-foreground/10")}>
-                <CardContent className="p-3">
-                  <div className="flex items-start gap-2" onClick={() => setExpandedPk(isExpanded ? null : pk)}>
-                    <button
-                      type="button"
-                      className="mt-0.5 shrink-0"
-                      title={`Descarca arhiva ZIP cu toate documentele cererii ${app.appNo}`}
-                      onClick={(e) => { e.stopPropagation(); void downloadAllForApp(app); }}
-                      disabled={downloadingAppPk === pk}
-                    >
-                      {downloadingAppPk === pk ? (
-                        <Loader2 className="h-4 w-4 animate-spin text-emerald-500" />
-                      ) : solved ? (
-                        <Download className="h-4 w-4 text-emerald-500" />
-                      ) : (
-                        <Clock className="h-4 w-4 text-muted-foreground" />
-                      )}
-                    </button>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 justify-between">
-                        <span className="font-mono font-bold text-sm">{app.appNo}</span>
-                        <Badge
-                          variant={solved ? "default" : "secondary"}
-                          className={cn("text-[10px]", solved && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400")}
-                        >
-                          {app.statusName || app.stateCode || "-"}
-                        </Badge>
-                      </div>
-                      <p className="text-xs text-muted-foreground truncate">{app.requester || app.deponent || "-"}</p>
-                      <div className="flex items-center gap-3 text-[11px] text-muted-foreground mt-1">
-                        <span>Termen: {fmtTs(app.dueDate)}</span>
-                        <Badge variant="outline" className="text-[9px]">{app.resolutionName || "-"}</Badge>
-                        {app.uat && <span>{app.uat}</span>}
-                      </div>
-                    </div>
-                    {isExpanded ? <ChevronUp className="h-4 w-4 text-muted-foreground shrink-0" /> : <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />}
+              <div
+                key={pk}
+                className={cn(
+                  "rounded-lg border px-2.5 py-1.5 transition-colors",
+                  isExpanded ? "bg-muted/20 ring-1 ring-foreground/10" : "hover:bg-muted/10",
+                )}
+              >
+                <div className="flex items-center gap-1.5" onClick={() => setExpandedPk(isExpanded ? null : pk)}>
+                  <button
+                    type="button"
+                    className="shrink-0"
+                    title={`Descarca ZIP cererea ${app.appNo}`}
+                    onClick={(e) => { e.stopPropagation(); void downloadAllForApp(app); }}
+                    disabled={downloadingAppPk === pk}
+                  >
+                    {downloadingAppPk === pk ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin text-emerald-500" />
+                    ) : solved ? (
+                      <Download className="h-3.5 w-3.5 text-emerald-500" />
+                    ) : (
+                      <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+                    )}
+                  </button>
+                  <span className="font-mono font-bold text-[13px]">{app.appNo}</span>
+                  <span className="text-[11px] text-muted-foreground truncate flex-1 min-w-0">{app.requester || app.deponent || "-"}</span>
+                  <span className="text-[10px] text-muted-foreground tabular-nums shrink-0">{fmtTs(app.dueDate)}</span>
+                  <Badge
+                    variant={solved ? "default" : "secondary"}
+                    className={cn("text-[9px] h-4 px-1 shrink-0", solved && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400")}
+                  >
+                    {(app.statusName || "").length > 12 ? (app.resolutionName || "-") : (app.statusName || "-")}
+                  </Badge>
+                  {isExpanded ? <ChevronUp className="h-3 w-3 text-muted-foreground shrink-0" /> : <ChevronDown className="h-3 w-3 text-muted-foreground shrink-0" />}
+                </div>
+                {isExpanded && (
+                  <div className="mt-1.5 pt-1.5 border-t">
+                    <IssuedDocsPanel applicationPk={pk} workspaceId={app.workspaceId} appNo={app.appNo} />
                   </div>
-                  {isExpanded && (
-                    <div className="mt-2 pt-2 border-t">
-                      <IssuedDocsPanel applicationPk={pk} workspaceId={app.workspaceId} appNo={app.appNo} />
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
+                )}
+              </div>
             );
           })}
         </div>
diff --git a/src/modules/geoportal/components/selection-toolbar.tsx b/src/modules/geoportal/components/selection-toolbar.tsx
index 8333d7e..386414f 100644
--- a/src/modules/geoportal/components/selection-toolbar.tsx
+++ b/src/modules/geoportal/components/selection-toolbar.tsx
@@ -3,12 +3,7 @@
 import { useState } from "react";
 import { Download, Trash2, MousePointerClick, Square, PenTool, Loader2, Sparkles } from "lucide-react";
 import { Button } from "@/shared/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/shared/components/ui/dropdown-menu";
+// Direct buttons instead of dropdown — works reliably on mobile + fixed containers
 import { Badge } from "@/shared/components/ui/badge";
 import { cn } from "@/shared/lib/utils";
 import type { SelectedFeature, ExportFormat } from "../types";
@@ -125,21 +120,20 @@ export function SelectionToolbar({
             {selectedFeatures.length} parcele
           </Badge>
 
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" disabled={exporting}>
-                {exporting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Download className="h-3.5 w-3.5" />}
-                Export
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              {EXPORT_FORMATS.map((fmt) => (
-                <DropdownMenuItem key={fmt.id} onClick={() => handleExport(fmt.id)} className="text-xs">
-                  {fmt.label}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
+          {EXPORT_FORMATS.map((fmt) => (
+            <Button
+              key={fmt.id}
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs gap-1"
+              disabled={exporting}
+              onClick={() => void handleExport(fmt.id)}
+              title={fmt.label}
+            >
+              {exporting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Download className="h-3.5 w-3.5" />}
+              <span className="hidden sm:inline">{fmt.id.toUpperCase()}</span>
+            </Button>
+          ))}
 
           {!hideEnrichment && <Button
             variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1"