Merge branch 'actions-modal-styles' into 'develop'

Make ActionsModal items full width, minor style improvements

See merge request soapbox-pub/soapbox!1846

app/soapbox/features/ui/components/actions_modal.tsx

@@ -37,10 +37,10 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
           {...compProps}
           rel='noopener'
           data-index={i}
-          className={classNames({ active, destructive })}
+          className={classNames('w-full', { active, destructive })}
           data-method={isLogout ? 'delete' : null}
         >
-          {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
+          {icon && <Icon className='min-w-fit' title={text} src={icon} role='presentation' tabIndex={-1} />}
           <div>
             <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
             <div>{meta}</div>

app/styles/components/modal.scss

@@ -285,7 +285,7 @@
 }
 
 .actions-modal {
-  @apply w-full max-h-full max-w-lg mt-auto mb-2 bg-white dark:bg-gray-800;
+  @apply w-full max-h-full max-w-lg m-auto mb-2 bg-white dark:bg-gray-800;
 
   .status {
     overflow-y: auto;
@@ -386,30 +386,3 @@
     width: 330px !important;
   }
 }
-
-.column-inline-form {
-  padding: 7px 15px;
-  padding-right: 5px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  background: var(--brand-color--faint);
-
-  label {
-    flex: 1 1 auto;
-
-    input {
-      width: 100%;
-      margin-bottom: 6px;
-
-      &:focus {
-        outline: 0;
-      }
-    }
-  }
-
-  .icon-button {
-    flex: 0 0 auto;
-    margin: 0 5px;
-  }
-}