refactor: Make event log look and act like other pages (#7704)

Updates the way the event log works. Previously, we'd use the
`displayInline` parameter to disable padding and border. However,
recent pages (including project overview etc) have moved away from
this look.

By bringing the event log into line with how those other pages look,
it'll be easier to make designs for the new filtering capability align
with other Unleash filters.

## Changes

The eventlog is used in three places. In two of them, it used to not
have a separating border. However, when we look at other screens that
have seen recent work (such as feature flags), we see that they *do*
have a separator, so bringing the event log in line seems like a
reasonable change.

Project flags list (notice the separator):

![image](https://github.com/user-attachments/assets/9b56a53d-38ef-4492-b1f8-f40ad5f3b6eb)


Here's what they look like before and after the change:

### Global event log
Before: 

![image](https://github.com/user-attachments/assets/ccf428f6-3491-4c60-a853-13c50ae771f0)

After (no change):

![image](https://github.com/user-attachments/assets/cfc74538-285c-4565-bd38-dfb5e421e966)


### Project event log

Before:

![image](https://github.com/user-attachments/assets/80ef1a36-3b13-4e76-8d59-534d63f0e6bd)


After:

![image](https://github.com/user-attachments/assets/7380518c-f6dc-4d4f-b085-48ed3761bb20)


### Flag event log

Before:

![image](https://github.com/user-attachments/assets/345a5d72-d358-49fd-967c-f6cb0706a4f6)


After:

![image](https://github.com/user-attachments/assets/b4e0d8e9-e79c-477e-8fc4-181c366207fc)

frontend/src/component/events/EventLog/EventLog.tsx

@@ -1,4 +1,4 @@
-import { Switch, FormControlLabel, useMediaQuery, Box } from '@mui/material';
+import { Switch, FormControlLabel, useMediaQuery } from '@mui/material';
 import EventJson from 'component/events/EventJson/EventJson';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
@@ -17,7 +17,6 @@ interface IEventLogProps {
     title: string;
     project?: string;
     feature?: string;
-    displayInline?: boolean;
 }
 
 const StyledEventsList = styled('ul')(({ theme }) => ({
@@ -28,12 +27,7 @@ const StyledEventsList = styled('ul')(({ theme }) => ({
     gap: theme.spacing(2),
 }));
 
-export const EventLog = ({
-    title,
-    project,
-    feature,
-    displayInline,
-}: IEventLogProps) => {
+export const EventLog = ({ title, project, feature }: IEventLogProps) => {
     const [query, setQuery] = useState('');
     const { events, totalEvents, fetchNextPage } = useEventSearch(
         project,
@@ -74,8 +68,6 @@ export const EventLog = ({
 
     return (
         <PageContent
-            disablePadding={displayInline}
-            disableBorder={displayInline}
             header={
                 <PageHeader
                     title={`${title} (${countText})`}
@@ -90,14 +82,13 @@ export const EventLog = ({
                 </PageHeader>
             }
         >
-            {displayInline && <Box sx={{ mt: 4 }} />}
             <ConditionallyRender
                 condition={Boolean(cache && cache.length === 0)}
-                show={() => <p>No events found.</p>}
+                show={<p>No events found.</p>}
             />
             <ConditionallyRender
                 condition={Boolean(cache && cache.length > 0)}
-                show={() => (
+                show={
                     <StyledEventsList>
                         {cache?.map((entry) => (
                             <ConditionallyRender
@@ -108,7 +99,7 @@ export const EventLog = ({
                             />
                         ))}
                     </StyledEventsList>
-                )}
+                }
             />
             <div ref={fetchNextPageRef} />
         </PageContent>

frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx

@@ -1,13 +1,6 @@
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { EventLog } from 'component/events/EventLog/EventLog';
-import { styled } from '@mui/material';
-
-const StyledContainer = styled('div')(({ theme }) => ({
-    borderRadius: theme.spacing(1.5),
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(4),
-}));
 
 const FeatureLog = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -18,11 +11,7 @@ const FeatureLog = () => {
         return null;
     }
 
-    return (
-        <StyledContainer>
-            <EventLog title='Event log' feature={featureId} displayInline />
-        </StyledContainer>
-    );
+    return <EventLog title='Event log' feature={featureId} />;
 };
 
 export default FeatureLog;

frontend/src/component/project/Project/ProjectLog/ProjectLog.tsx

@@ -1,19 +1,8 @@
 import { EventLog } from 'component/events/EventLog/EventLog';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { styled } from '@mui/material';
-
-const StyledDiv = styled('div')(({ theme }) => ({
-    borderRadius: '12.5px',
-    backgroundColor: theme.palette.background.paper,
-    padding: '2rem',
-}));
 
 export const ProjectLog = () => {
     const projectId = useRequiredPathParam('projectId');
 
-    return (
-        <StyledDiv>
-            <EventLog title='Event Log' project={projectId} displayInline />
-        </StyledDiv>
-    );
+    return <EventLog title='Event Log' project={projectId} />;
 };