Fix dialog footer styles

components/FilterModal/index.tsx

@@ -414,7 +414,8 @@ const FilterModal = (props: Props) => {
           {originalOnlyField()}
         </div>
         <div className="DialogFooter" ref={footerRef}>
-          <div className="Buttons Spaced">
+          <div className="Left"></div>
+          <div className="Right Buttons Spaced">
             <Button
               blended={true}
               text={t('modals.filters.buttons.clear')}

components/auth/AccountModal/index.tsx

@@ -330,10 +330,13 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
               {themeField()}
             </div>
             <div className="DialogFooter" ref={footerRef}>
-              <Button
-                contained={true}
-                text={t('modals.settings.buttons.confirm')}
-              />
+              <div className="Left"></div>
+              <div className="Right">
+                <Button
+                  contained={true}
+                  text={t('modals.settings.buttons.confirm')}
+                />
+              </div>
             </div>
           </form>
         </DialogContent>

components/common/DialogContent/index.scss

@@ -160,7 +160,8 @@
       box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.16);
       border-top: 1px solid rgba(0, 0, 0, 0.24);
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      justify-content: space-between;
       padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
       position: sticky;
 
@@ -178,7 +179,6 @@
 
         &.Spaced {
           justify-content: space-between;
-          width: 100%;
         }
       }
     }