From e67c78b6a3489d2591e9b8f219f24d7bd57e7f53 Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Mon, 29 Apr 2024 02:29:26 +0300
Subject: [PATCH] adjust more the UI - final

---
 pages/_app.tsx                    |  2 +-
 pages/cart/translations/index.tsx | 17 ++++++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index afb21f2..897ed80 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -26,7 +26,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 
 
 export default function App({ Component, pageProps: { session, ...pageProps }, }: AppProps<{ session: Session }>) {
-  console.log(pageProps);
+  // console.log(pageProps);
   const router = useRouter();
   const [messages, setMessages] = useState({});
 
diff --git a/pages/cart/translations/index.tsx b/pages/cart/translations/index.tsx
index c34c2e6..6929349 100644
--- a/pages/cart/translations/index.tsx
+++ b/pages/cart/translations/index.tsx
@@ -40,7 +40,7 @@ const AdminTranslations = () => {
     return (
         <Layout>
             <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
-                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="mx-auto px-4 sm:px-6 lg:px-8">
                     <div className="sticky top-0 z-10 bg-white shadow-md py-4 px-4">
                         <div className="flex justify-between items-center">
                             <h1 className="text-xl font-semibold leading-tight text-gray-800">Edit Translations</h1>
@@ -70,24 +70,23 @@ const AdminTranslations = () => {
                         <table className="w-full text-sm text-left text-gray-500">
                             <thead className="text-xs text-gray-700 uppercase bg-gray-50">
                                 <tr>
-                                    <th scope="col" className="py-3 px-6">Key</th>
-                                    <th scope="col" className="py-3 px-6">Base Translation</th>
-                                    <th scope="col" className="py-3 px-6">Translation</th>
+                                    <th scope="col" className="py-3 px-6 w-2/12">Key</th> {/* Adjusted width */}
+                                    <th scope="col" className="py-3 px-6 w-3/12">Base Translation</th> {/* Adjusted width */}
+                                    <th scope="col" className="py-3 px-6 w-7/12">Translation</th> {/* Adjusted width */}
                                 </tr>
                             </thead>
                             <tbody>
                                 {Object.entries(baseTranslations).map(([key, baseValue]) => (
                                     <tr key={key} className="bg-white border-b hover:bg-gray-50">
-                                        <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">{key}</td>
+                                        <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap text-ellipsis">{key}</td>
                                         <td className="py-4 px-6">{baseValue}</td>
                                         <td className="py-4 px-6">
-                                            <input
-                                                type="text"
+                                            <textarea
                                                 value={translations[key] || ''}
                                                 placeholder='Въведи превод...'
                                                 onChange={e => handleChange(key, e.target.value)}
-                                                className="block w-full text-base px-2 py-1 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded placeholder-gray-400"
-                                                style={{ transition: 'box-shadow .3s', boxShadow: translations[key] ? '0 0 0px 1px rgba(59, 130, 246, 0.5)' : 'none' }}
+                                                className="block w-60hv text-base px-2 py-1 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded placeholder-gray-400"
+                                                style={{ width: '100%', resize: 'both', transition: 'box-shadow .3s', boxShadow: translations[key] ? '0 0 0px 1px rgba(59, 130, 246, 0.5)' : 'none' }}
                                             />
 
                                         </td>