fixed units lables in the editors menu

frontend/src/components/ElementSettings/CarouselSettingsSectionCompact.tsx

@@ -109,7 +109,7 @@ const CarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='W (vw)'
+              placeholder='W (%)'
               value={carouselPrevWidth}
               onChange={(e) =>
                 onUpdateElement({ carouselPrevWidth: e.target.value })
@@ -120,7 +120,7 @@ const CarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='H (vh)'
+              placeholder='H (%)'
               value={carouselPrevHeight}
               onChange={(e) =>
                 onUpdateElement({ carouselPrevHeight: e.target.value })
@@ -156,7 +156,7 @@ const CarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='W (vw)'
+              placeholder='W (%)'
               value={carouselNextWidth}
               onChange={(e) =>
                 onUpdateElement({ carouselNextWidth: e.target.value })
@@ -167,7 +167,7 @@ const CarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='H (vh)'
+              placeholder='H (%)'
               value={carouselNextHeight}
               onChange={(e) =>
                 onUpdateElement({ carouselNextHeight: e.target.value })

frontend/src/components/ElementSettings/CommonSettingsSection.tsx

@@ -32,13 +32,13 @@ const CommonSettingsSection: React.FC<CommonSettingsSectionProps> = ({
 
       {showPosition && (
         <div className='grid gap-4 md:grid-cols-2'>
-          <FormField label='X percent'>
+          <FormField label='X (%)'>
             <input
               value={xPercent}
               onChange={(event) => onChange('xPercent', event.target.value)}
             />
           </FormField>
-          <FormField label='Y percent'>
+          <FormField label='Y (%)'>
             <input
               value={yPercent}
               onChange={(event) => onChange('yPercent', event.target.value)}

frontend/src/components/ElementSettings/GalleryCarouselSettingsSectionCompact.tsx

@@ -86,7 +86,7 @@ const GalleryCarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='W (rem)'
+              placeholder='W (%)'
               value={prevWidth}
               onChange={(event) =>
                 onUpdateElement({
@@ -99,7 +99,7 @@ const GalleryCarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='H (rem)'
+              placeholder='H (%)'
               value={prevHeight}
               onChange={(event) =>
                 onUpdateElement({
@@ -137,7 +137,7 @@ const GalleryCarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='W (rem)'
+              placeholder='W (%)'
               value={nextWidth}
               onChange={(event) =>
                 onUpdateElement({
@@ -150,7 +150,7 @@ const GalleryCarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='H (rem)'
+              placeholder='H (%)'
               value={nextHeight}
               onChange={(event) =>
                 onUpdateElement({
@@ -188,7 +188,7 @@ const GalleryCarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='W (rem)'
+              placeholder='W (%)'
               value={backWidth}
               onChange={(event) =>
                 onUpdateElement({
@@ -201,7 +201,7 @@ const GalleryCarouselSettingsSectionCompact: React.FC<
               step='0.25'
               min='0'
               className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
-              placeholder='H (rem)'
+              placeholder='H (%)'
               value={backHeight}
               onChange={(event) =>
                 onUpdateElement({

frontend/src/components/ElementSettings/GallerySectionStyleInputs.tsx

@@ -272,7 +272,7 @@ const GallerySectionStyleInputs: React.FC<GallerySectionStyleInputsProps> = ({
                 className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                 value={values[`${prefix}MaxHeight`] || ''}
                 onChange={(e) => onChange(`${prefix}MaxHeight`, e.target.value)}
-                placeholder='400px, 50vh'
+                placeholder='400px, 50%'
               />
             </div>
           </div>

frontend/src/components/ElementSettings/StyleSettingsSection.tsx

@@ -17,11 +17,10 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
     <div className='space-y-3'>
       <h3 className='text-sm font-semibold'>View & Stylization</h3>
       <p className='text-xs text-gray-500'>
-        Fill numbers only: width is saved as vw, height as vh, border and radius
-        as px.
+        Dimensions are saved as % of canvas, border and radius as px.
       </p>
       <div className='grid gap-3 md:grid-cols-2'>
-        <FormField label='Width (vw)'>
+        <FormField label='Width (%)'>
           <input
             type='number'
             step='0.1'
@@ -31,7 +30,7 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
             placeholder='e.g. 24'
           />
         </FormField>
-        <FormField label='Height (vh)'>
+        <FormField label='Height (%)'>
           <input
             type='number'
             step='0.1'
@@ -41,7 +40,7 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
             placeholder='e.g. 8'
           />
         </FormField>
-        <FormField label='Min width (vw)'>
+        <FormField label='Min width (%)'>
           <input
             type='number'
             step='0.1'
@@ -50,7 +49,7 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
             onChange={(event) => onChange('minWidth', event.target.value)}
           />
         </FormField>
-        <FormField label='Max width (vw)'>
+        <FormField label='Max width (%)'>
           <input
             type='number'
             step='0.1'
@@ -59,7 +58,7 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
             onChange={(event) => onChange('maxWidth', event.target.value)}
           />
         </FormField>
-        <FormField label='Min height (vh)'>
+        <FormField label='Min height (%)'>
           <input
             type='number'
             step='0.1'
@@ -68,7 +67,7 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
             onChange={(event) => onChange('minHeight', event.target.value)}
           />
         </FormField>
-        <FormField label='Max height (vh)'>
+        <FormField label='Max height (%)'>
           <input
             type='number'
             step='0.1'

frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx

@@ -15,12 +15,12 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
   return (
     <div className='space-y-2'>
       <p className='text-[10px] text-gray-500'>
-        Numbers only: width=vw, height=vh, border/radius=px
+        Dimensions = % of canvas, border/radius = px
       </p>
       <div className='grid grid-cols-2 gap-2'>
         <div>
           <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-            Width (vw)
+            Width (%)
           </label>
           <input
             type='number'
@@ -34,7 +34,7 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
         </div>
         <div>
           <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-            Height (vh)
+            Height (%)
           </label>
           <input
             type='number'
@@ -48,7 +48,7 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
         </div>
         <div>
           <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-            Min W (vw)
+            Min W (%)
           </label>
           <input
             type='number'
@@ -61,7 +61,7 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
         </div>
         <div>
           <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-            Max W (vw)
+            Max W (%)
           </label>
           <input
             type='number'
@@ -74,7 +74,7 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
         </div>
         <div>
           <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-            Min H (vh)
+            Min H (%)
           </label>
           <input
             type='number'
@@ -87,7 +87,7 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
         </div>
         <div>
           <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-            Max H (vh)
+            Max H (%)
           </label>
           <input
             type='number'