[nit] Misc code organization

- Move classes/styling up to top of file
- add jsdoc block
- add clearer comments on why state is being used over refs for the input/panel refs

src/components/popover/input_popover.tsx

@@ -66,10 +66,19 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
   panelRef: _panelRef,
   ...props
 }) => {
-  const euiThemeContext = useEuiTheme();
+  const classes = classnames('euiInputPopover', className);
+  const euiTheme = useEuiTheme();
+  const form = euiFormVariables(euiTheme);
+
+  /**
+   * Ref setup
+   */
+
+  const popoverClassRef = useRef<EuiPopover>(null);
+  // The inputEl state ensures that width is correctly tracked on initial load
   const [inputEl, setInputEl] = useState<HTMLElement | null>(null);
+  // The panelEl state ensures that width is correctly set every time the popover opens
   const [panelEl, setPanelEl] = useState<HTMLElement | null>(null);
-  const popoverClassRef = useRef<EuiPopover | null>(null);
 
   const inputRef = useCombinedRefs([setInputEl, _inputRef]);
   const panelRef = useCombinedRefs([setPanelEl, _panelRef]);
@@ -131,9 +140,6 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
     [disableFocusTrap, closePopover, panelPropsOnKeyDown]
   );
 
-  const classes = classnames('euiInputPopover', className);
-  const form = euiFormVariables(euiThemeContext);
-
   return (
     <EuiPopover
       css={css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth))}