Sticky publish footer (#179)

src/components/Editor/TopicSelect/TopicSelect.scss

@@ -1,5 +1,7 @@
 .TopicSelect .solid-select-list {
   background: #fff;
+  position: relative;
+  z-index: 13;
 }
 
 .TopicSelect .solid-select-option[data-disabled='true'] {

src/components/Views/Edit.tsx

@@ -347,9 +347,6 @@ export const EditView = (props: Props) => {
                     </Show>
                   </>
                 </Show>
-                <Show when={page().route === 'editSettings'}>
-                  <PublishSettings shoutId={props.shout.id} form={form} />
-                </Show>
               </div>
             </div>
             <Show when={page().route === 'edit'}>
@@ -362,7 +359,9 @@ export const EditView = (props: Props) => {
           </div>
         </form>
       </div>
-
+      <Show when={page().route === 'editSettings'}>
+        <PublishSettings shoutId={props.shout.id} form={form} />
+      </Show>
       <Panel shoutId={props.shout.id} />
     </>
   )

src/components/Views/PublishSettings/PublishSettings.module.scss

@@ -138,15 +138,22 @@
   }
 
   .formActions {
+    background: var(--background-color);
+    position: sticky;
+    z-index: 12;
+    bottom: 0;
+    border-top: 2px solid var(--black-100);
+    margin-top: 80px;
+    margin-bottom: -40px;
+
+    .content {
       display: flex;
       align-items: center;
       justify-content: flex-end;
       flex-direction: row;
       padding: 1rem 0;
       gap: 1rem;
-    margin-top: 80px;
+    }
-    border-top: 2px solid var(--black-100);
-
     .cancel {
       margin-right: auto;
     }

src/components/Views/PublishSettings/PublishSettings.tsx

@@ -110,7 +110,10 @@ export const PublishSettings = (props: Props) => {
   }
 
   return (
-    <div class={styles.PublishSettings}>
+    <form class={clsx(styles.PublishSettings, 'inputs-wrapper')}>
+      <div class="wide-container">
+        <div class="row">
+          <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
             <div>
               <button type="button" class={styles.goBack} onClick={handleBackClick}>
                 <Icon name="arrow-left" class={stylesBeside.icon} />
@@ -131,11 +134,17 @@ export const PublishSettings = (props: Props) => {
                 </Show>
               </div>
               <div
-          class={clsx(styles.shoutCardCoverContainer, { [styles.hasImage]: settingsForm.coverImageUrl })}
+                class={clsx(styles.shoutCardCoverContainer, {
+                  [styles.hasImage]: settingsForm.coverImageUrl
+                })}
               >
                 <Show when={settingsForm.coverImageUrl ?? initialData.coverImageUrl}>
                   <div class={styles.shoutCardCover}>
-              <img src={imageProxy(settingsForm.coverImageUrl)} alt={initialData.title} loading="lazy" />
+                    <img
+                      src={imageProxy(settingsForm.coverImageUrl)}
+                      alt={initialData.title}
+                      loading="lazy"
+                    />
                   </div>
                 </Show>
                 <div class={styles.text}>
@@ -229,8 +238,15 @@ export const PublishSettings = (props: Props) => {
             {/*    <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
             {/*  </div>*/}
             {/*</div>*/}
+          </div>
+        </div>
+      </div>
 
       <div class={styles.formActions}>
+        <div class="wide-container">
+          <div class="row">
+            <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
+              <div class={styles.content}>
                 <Button
                   variant="light"
                   value={t('Cancel changes')}
@@ -240,9 +256,13 @@ export const PublishSettings = (props: Props) => {
                 <Button variant="secondary" onClick={handleSaveDraft} value={t('Save draft')} />
                 <Button onClick={handlePublishSubmit} variant="primary" value={t('Publish')} />
               </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <Modal variant="narrow" name="uploadCoverImage">
         <UploadModalContent onClose={(value) => handleUploadModalContentCloseSetCover(value)} />
       </Modal>
-    </div>
+    </form>
   )
 }