- Fix issues

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/eula/eula.component.jsx

@@ -26,9 +26,15 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
         const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight;
         if (bottom && !hasEverScrolledToBottom) {
             setHasEverScrolledToBottom(true);
+        } else if (e.target.scrollHeight <= e.target.clientHeight && !hasEverScrolledToBottom) {
+            setHasEverScrolledToBottom(true);
         }
     };
 
+    useEffect(() => {
+        handleScroll({ target: markdownCardRef.current });
+    }, []);
+
     const handleChange = useCallback(() => {
         form.validateFields({ validateOnly: true })
             .then(() => setFormReady(hasEverScrolledToBottom))
@@ -93,26 +99,26 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
                 )}
                 closable={false}
             >
-                <Space direction='vertical'>
                     <Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
                         <div id='markdowndiv' className='eula-markdown-div'>
                             <Markdown children={currentEula?.content?.replace(/\\n/g, '\n')} />
                         </div>
                     </Card>
+
                     <EulaFormComponent form={form} handleChange={handleChange} onFinish={onFinish} t={t} />
+
                     {!hasEverScrolledToBottom && (
                         <Card className='eula-never-scrolled' type='inner'>
                             <h3>{t('eula.content.never_scrolled')}</h3>
                         </Card>
                     )}
-                </Space>
             </Modal>
         </>
     )
 }
 
 const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
-    <Card type='inner' title={t('eula.titles.upper_card')}>
+    <Card type='inner' title={t('eula.titles.upper_card')} style={{marginTop: '10px'}}>
         <Form id='tosForm' onChange={handleChange} onFinish={onFinish} form={form}>
             <Row gutter={24}>
                 <Col span={12}>