ref(dashboards): Improve svg grid layout on Safari (#26147)

Wraps the images in a container to get around height issues with grid rows in Safari. Still needs a bit of improvement to match chrome.

Co-authored-by: k-fish <kevan.fisher@sentry.io>

static/app/views/dashboardsV2/manage/dashboardList.tsx

@@ -135,15 +135,13 @@ function DashboardList({
             <WidgetGrid>
               {dashboard.widgetDisplay.map((displayType, i) => {
                 return displayType === DisplayType.BIG_NUMBER ? (
-                  <BigNumberWidgetWrapper
-                    key={`${i}-${displayType}`}
-                    src={miniWidget(displayType)}
-                  />
+                  <BigNumberWidgetWrapper key={`${i}-${displayType}`}>
+                    <WidgetImage src={miniWidget(displayType)} />
+                  </BigNumberWidgetWrapper>
                 ) : (
-                  <MiniWidgetWrapper
-                    key={`${i}-${displayType}`}
-                    src={miniWidget(displayType)}
-                  />
+                  <MiniWidgetWrapper key={`${i}-${displayType}`}>
+                    <WidgetImage src={miniWidget(displayType)} />
+                  </MiniWidgetWrapper>
                 );
               })}
             </WidgetGrid>
@@ -252,9 +250,12 @@ const WidgetGrid = styled('div')`
   }
 `;
 
-const BigNumberWidgetWrapper = styled('img')`
+const BigNumberWidgetWrapper = styled('div')`
+  display: flex;
+  align-items: flex-start;
   width: 100%;
   height: 100%;
+
   /* 2 cols */
   grid-area: span 1 / span 2;
 
@@ -269,12 +270,19 @@ const BigNumberWidgetWrapper = styled('img')`
   }
 `;
 
-const MiniWidgetWrapper = styled('img')`
+const MiniWidgetWrapper = styled('div')`
+  display: flex;
+  align-items: flex-start;
   width: 100%;
   height: 100%;
   grid-area: span 2 / span 2;
 `;
 
+const WidgetImage = styled('img')`
+  width: 100%;
+  height: 100%;
+`;
+
 const PaginationRow = styled(Pagination)`
   margin-bottom: ${space(3)};
 `;