restyled

src/client/js/components/Admin/Security/SecuritySetting.jsx

@@ -64,17 +64,18 @@ class SecuritySetting extends React.Component {
           <div className="col-md-6 ml-md-5">
             <div className="dropdown">
               <button
-                className={`btn btn-outline-secondary dropdown-toggle w-100 grw-button-width text-left
-                            position-relative ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}
-                          `}
+                className={`btn btn-outline-secondary dropdown-toggle text-right col-12
+                            col-md-auto ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
                 type="button"
                 id="dropdownMenuButton"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                {currentRestrictGuestMode === 'Deny' && t('security_setting.guest_mode.deny')}
-                {currentRestrictGuestMode === 'Readonly' && t('security_setting.guest_mode.readonly')}
+                <span className="float-left">
+                  {currentRestrictGuestMode === 'Deny' && t('security_setting.guest_mode.deny')}
+                  {currentRestrictGuestMode === 'Readonly' && t('security_setting.guest_mode.readonly')}
+                </span>
               </button>
               <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                 <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('Deny') }}>
@@ -146,17 +147,19 @@ class SecuritySetting extends React.Component {
           <div className="col-md-6 ml-md-5">
             <div className="dropdown">
               <button
-                className="btn btn-outline-secondary dropdown-toggle w-100 grw-button-width text-left position-relative"
+                className="btn btn-outline-secondary dropdown-toggle text-right col-12 col-md-auto"
                 type="button"
                 id="dropdownMenuButton"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                {currentPageCompleteDeletionAuthority === 'anyOne' && t('security_setting.anyone')}
-                {currentPageCompleteDeletionAuthority === 'adminOnly' && t('security_setting.admin_only')}
-                {(currentPageCompleteDeletionAuthority === 'adminAndAuthor' || currentPageCompleteDeletionAuthority == null)
-                    && t('security_setting.admin_and_author')}
+                <span className="float-left">
+                  {currentPageCompleteDeletionAuthority === 'anyOne' && t('security_setting.anyone')}
+                  {currentPageCompleteDeletionAuthority === 'adminOnly' && t('security_setting.admin_only')}
+                  {(currentPageCompleteDeletionAuthority === 'adminAndAuthor' || currentPageCompleteDeletionAuthority == null)
+                      && t('security_setting.admin_and_author')}
+                </span>
               </button>
               <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                 <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('anyOne') }}>

src/client/styles/scss/_admin.scss

@@ -164,22 +164,4 @@
 
 .admin-navigation > a + a {
   margin-top: 2px;
-}
-
-.dropdown .grw-button-width {
-  @include media-breakpoint-up(md) {
-    width: auto !important;
-  }
-}
-
-.admin-security {
-  #admin-security-setting {
-    @include media-breakpoint-down(md) {
-      .dropdown-toggle::after {
-        position: absolute;
-        top: 40%;
-        right: 2%;
-      }
-    }
-  }
 }