From cfa24f440f1f70e165fd7f3d5fa283cc09285961 Mon Sep 17 00:00:00 2001
From: Meriem-BenIsmail <meriembenismail867@gmail.com>
Date: Fri, 31 Jan 2025 10:14:38 +0100
Subject: [PATCH] display chosen file path in form as text instead of readonly
 input.

---
 .../src/formbuilder/objectform/fileselectorwidget.tsx | 11 +++--------
 python/jupytergis_lab/style/base.css                  |  8 ++++++++
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/base/src/formbuilder/objectform/fileselectorwidget.tsx b/packages/base/src/formbuilder/objectform/fileselectorwidget.tsx
index 5aaa19358..9f2bf3338 100644
--- a/packages/base/src/formbuilder/objectform/fileselectorwidget.tsx
+++ b/packages/base/src/formbuilder/objectform/fileselectorwidget.tsx
@@ -113,18 +113,13 @@ export const FileSelectorWidget = (props: any) => {
 
   return (
     <div>
-      <div>
-        <input
-          type="text"
-          className="jp-mod-styled"
-          value={serverFilePath || ''}
-          readOnly
-          style={{ width: '70%', marginRight: '10px' }}
-        />
+      <div className="file-container">
         <button className="jp-mod-styled" onClick={handleBrowseServerFiles}>
           Browse Server Files
         </button>
+        <p>{serverFilePath || ''}</p>
       </div>
+
       <div>
         <h3 className="jp-FormGroup-fieldLabel jp-FormGroup-contentItem">
           Or enter external URL
diff --git a/python/jupytergis_lab/style/base.css b/python/jupytergis_lab/style/base.css
index 33f72fcca..b4355fb06 100644
--- a/python/jupytergis_lab/style/base.css
+++ b/python/jupytergis_lab/style/base.css
@@ -732,3 +732,11 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
 .jgis-identify-grid-body:last-of-type strong:last-of-type {
   padding-bottom: 8px;
 }
+
+/* Style the file path text */
+.file-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 10px;
+}