How to make a fixed position element responsive

    <DialogContent>
          <Box position={'relative'} width={'80%'}>
            <Box position={'fixed'} zIndex={10} width={'50%'}>
              <SearchBar name={''} placeholder={'Search'} />
            </Box>
          </Box>

          <Box maxHeight={'300px'} mt={'45px'}>
            {orgList &&
              orgList.map((org) => (
                <OrganisationItem key={org.id} title={org.name} />
              ))}
          </Box>
        </DialogContent>