M: Improve mobile UI

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -13,7 +13,7 @@ function ApplicationLayout() {
     <NavigationState>
       <div className='min-w-[20rem] clr-app antialiased h-full'>
         <ConceptToaster
-          className='mt-[4rem] text-sm' // prettier: split lines
+          className='mt-[4rem] text-[14px]' // prettier: split lines
           autoClose={3000}
           draggable={false}
           pauseOnFocusLoss={false}

rsconcept/frontend/src/app/Navigation/Navigation.tsx

@@ -36,7 +36,7 @@ function Navigation() {
       <ToggleNavigation />
       <motion.div
         className={clsx(
-          'pl-2 pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
+          'pl-2 pr-[1.5rem] sm:pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
           'flex',
           'cc-shadow-border'
         )}

rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx

@@ -13,10 +13,11 @@ function ToggleNavigation() {
       type='button'
       tabIndex={-1}
       className={clsx(
-        'absolute top-0 right-0 z-navigation flex items-center justify-center',
+        'absolute top-0 right-0 z-navigation',
+        'min-h-[2rem] min-w-[2rem] sm:min-w-fit',
+        'flex items-center justify-center',
         'clr-hover',
-        'select-none',
+        'select-none'
-        'min-h-[2rem]'
       )}
       onClick={toggleNoNavigation}
       initial={false}

rsconcept/frontend/src/pages/OssPage/OssTabs.tsx

@@ -12,6 +12,7 @@ import Loader from '@/components/ui/Loader';
 import TabLabel from '@/components/ui/TabLabel';
 import TextURL from '@/components/ui/TextURL';
 import AnimateFade from '@/components/wrap/AnimateFade';
+import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useLibrary } from '@/context/LibraryContext';
 import { useBlockNavigation, useConceptNavigation } from '@/context/NavigationContext';
@@ -34,6 +35,7 @@ function OssTabs() {
   const router = useConceptNavigation();
   const query = useQueryStrings();
   const activeTab = query.get('tab') ? (Number(query.get('tab')) as OssTabID) : OssTabID.GRAPH;
+  const { user } = useAuth();
 
   const { calculateHeight, setNoFooter } = useConceptOptions();
   const { schema, loading, loadingError: errorLoading } = useOSS();
@@ -41,7 +43,12 @@ function OssTabs() {
 
   const [isModified, setIsModified] = useState(false);
   const [selected, setSelected] = useState<OperationID[]>([]);
-  useBlockNavigation(isModified);
+  useBlockNavigation(
+    isModified &&
+      schema !== undefined &&
+      user !== undefined &&
+      (user.is_staff || user.id == schema.owner || schema.editors.includes(user.id))
+  );
 
   useLayoutEffect(() => {
     if (schema) {

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx

@@ -49,7 +49,10 @@ function ToolbarConstituenta({
   const controller = useRSEdit();
 
   return (
-    <Overlay position='top-1 right-4' className='cc-icons md:right-1/2 md:translate-x-1/2 transition-all duration-500'>
+    <Overlay
+      position='top-1 right-1/2 translate-x-1/2 sm:right-4 sm:translate-x-0 md:right-1/2 md:translate-x-1/2'
+      className='cc-icons outline-none  transition-all duration-500'
+    >
       {controller.schema && controller.schema?.oss.length > 0 ? (
         <MiniSelectorOSS
           items={controller.schema.oss}