UI – increase scope of policy > critical checkbox width override to include new policy form (#17348)

## ➡️ #17036 

![Screenshot 2024-03-04 at 11 36
34 AM](https://github.com/fleetdm/fleet/assets/61553566/47fef465-25b8-48cb-9634-a060d5acd90c)



- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

changes/17036-critical-policy-checkbox

@@ -0,0 +1 @@
+- Fix alignment of the critical policy checkbox when saving a new policy

frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx

@@ -118,7 +118,6 @@ const PolicyForm = ({
     isObserverPlus,
     isOnGlobalTeam,
     isPremiumTier,
-    isSandboxMode,
     config,
   } = useContext(AppContext);
 
@@ -443,12 +442,6 @@ const PolicyForm = ({
   const renderCriticalPolicy = () => {
     return (
       <div className="critical-checkbox-wrapper">
-        {isSandboxMode && (
-          <PremiumFeatureIconWithTooltip
-            tooltipDelayHide={500}
-            tooltipPositionOverrides={{ leftAdj: 84, topAdj: -4 }}
-          />
-        )}
         <Checkbox
           name="critical-policy"
           className="critical-policy"

frontend/pages/policies/PolicyPage/components/PolicyForm/_styles.scss

@@ -15,7 +15,10 @@
     .form-field--input {
       margin: 0;
     }
+  }
 
+  &__wrapper,
+  &__save-modal-form {
     .critical-checkbox-wrapper {
       // override form child width: 100%
       width: auto;

frontend/pages/policies/PolicyPage/components/SaveNewPolicyModal/SaveNewPolicyModal.tsx

@@ -15,7 +15,6 @@ import TooltipWrapper from "components/TooltipWrapper";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
 import ReactTooltip from "react-tooltip";
-import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip";
 import { COLORS } from "styles/var/colors";
 
 export interface ISaveNewPolicyModalProps {
@@ -48,7 +47,7 @@ const SaveNewPolicyModal = ({
   platformSelector,
   isUpdatingPolicy,
 }: ISaveNewPolicyModalProps): JSX.Element => {
-  const { isPremiumTier, isSandboxMode } = useContext(AppContext);
+  const { isPremiumTier } = useContext(AppContext);
   const {
     lastEditedQueryName,
     lastEditedQueryDescription,
@@ -145,7 +144,6 @@ const SaveNewPolicyModal = ({
           {platformSelector.render()}
           {isPremiumTier && (
             <div className="critical-checkbox-wrapper">
-              {isSandboxMode && <PremiumFeatureIconWithTooltip />}
               <Checkbox
                 name="critical-policy"
                 onChange={(value: boolean) => setCritical(value)}