From 3c0951d2dbe2ad2ecc00784e6ff4f9d6daa673e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Gran=C3=A1t?=
 <granat.stepan@gmail.com>
Date: Thu, 19 Dec 2024 09:54:30 +0100
Subject: [PATCH] fix: make frontend beautiful

---
 .../translations/KeyCreateForm/FormBody.tsx   | 14 ++++++++++---
 .../translations/KeyEdit/KeyGeneral.tsx       | 12 +++++++++--
 .../translations/KeySingle/KeyEditForm.tsx    | 20 ++++++++++---------
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/webapp/src/views/projects/translations/KeyCreateForm/FormBody.tsx b/webapp/src/views/projects/translations/KeyCreateForm/FormBody.tsx
index 373572a680..2391773192 100644
--- a/webapp/src/views/projects/translations/KeyCreateForm/FormBody.tsx
+++ b/webapp/src/views/projects/translations/KeyCreateForm/FormBody.tsx
@@ -7,6 +7,8 @@ import {
 } from 'formik';
 import { Box, Button, styled } from '@mui/material';
 import { T, useTranslate } from '@tolgee/react';
+import { useState } from 'react';
+import clsx from 'clsx';
 
 import { NamespaceSelector } from 'tg.component/NamespaceSelector/NamespaceSelector';
 import { EditorWrapper } from 'tg.component/editor/EditorWrapper';
@@ -25,7 +27,6 @@ import { PluralEditor } from '../translationVisual/PluralEditor';
 import type { ValuesCreateType } from './KeyCreateForm';
 import { PluralFormCheckbox } from 'tg.component/common/form/PluralFormCheckbox';
 import { ControlsEditorSmall } from '../cell/ControlsEditorSmall';
-import { useState } from 'react';
 
 const StyledContainer = styled('div')`
   display: grid;
@@ -35,8 +36,13 @@ const StyledContainer = styled('div')`
 
 const StyledKeyNsContainer = styled('div')`
   display: grid;
-  grid-template-columns: 1fr 300px;
   gap: 0px 16px;
+  grid-template-columns: 1fr;
+
+  &.useNamespaces {
+    grid-template-columns: 1fr 300px;
+  }
+
   @media (max-width: 800px) {
     grid-template-columns: 1fr;
   }
@@ -84,7 +90,9 @@ export const FormBody: React.FC<Props> = ({ onCancel, autofocus }) => {
   return (
     <>
       <StyledContainer>
-        <StyledKeyNsContainer>
+        <StyledKeyNsContainer
+          className={clsx({ useNamespaces: project.useNamespaces })}
+        >
           <FastField name="name">
             {({ field, form, meta }: FieldProps<any>) => {
               return (
diff --git a/webapp/src/views/projects/translations/KeyEdit/KeyGeneral.tsx b/webapp/src/views/projects/translations/KeyEdit/KeyGeneral.tsx
index fcac4e6c6d..32f78efa14 100644
--- a/webapp/src/views/projects/translations/KeyEdit/KeyGeneral.tsx
+++ b/webapp/src/views/projects/translations/KeyEdit/KeyGeneral.tsx
@@ -13,13 +13,19 @@ import { RequiredField } from 'tg.component/common/form/RequiredField';
 import { LabelHint } from 'tg.component/common/LabelHint';
 import { PluralFormCheckbox } from 'tg.component/common/form/PluralFormCheckbox';
 import { useProject } from 'tg.hooks/useProject';
+import clsx from 'clsx';
 
 const StyledSection = styled('div')``;
 
 const StyledKeyNsContainer = styled('div')`
   display: grid;
-  grid-template-columns: 1fr 300px;
   gap: 0px 16px;
+  grid-template-columns: 1fr;
+
+  &.useNamespaces {
+    grid-template-columns: 1fr 300px;
+  }
+
   @media (max-width: 800px) {
     grid-template-columns: 1fr;
   }
@@ -47,7 +53,9 @@ export const KeyGeneral = () => {
 
   return (
     <>
-      <StyledKeyNsContainer>
+      <StyledKeyNsContainer
+        className={clsx({ useNamespaces: project.useNamespaces })}
+      >
         <StyledSection>
           <FieldLabel>
             <RequiredField>{t('translations_key_edit_label')}</RequiredField>
diff --git a/webapp/src/views/projects/translations/KeySingle/KeyEditForm.tsx b/webapp/src/views/projects/translations/KeySingle/KeyEditForm.tsx
index 5b241a39b1..dee5d5f0d6 100644
--- a/webapp/src/views/projects/translations/KeySingle/KeyEditForm.tsx
+++ b/webapp/src/views/projects/translations/KeySingle/KeyEditForm.tsx
@@ -190,15 +190,17 @@ export const KeyEditForm: React.FC = () => {
           </StyledField>
         </div>
 
-        <div>
-          <FieldLabel>
-            <T keyName="translation_single_label_namespace" />
-          </FieldLabel>
-          <NamespaceSelector
-            value={keyData.keyNamespace}
-            onChange={handleNamespaceChange}
-          />
-        </div>
+        {project.useNamespaces && (
+          <div>
+            <FieldLabel>
+              <T keyName="translation_single_label_namespace" />
+            </FieldLabel>
+            <NamespaceSelector
+              value={keyData.keyNamespace}
+              onChange={handleNamespaceChange}
+            />
+          </div>
+        )}
 
         <div>
           <FieldLabel>