fix: device type display on survey, and spacing between filters (#28581)

PostHog · Feb 12, 2025 · 01acee6 · 01acee6
1 parent 92a80e7
commit 01acee6
Show file tree

Hide file tree

Showing 13 changed files with 17 additions and 15 deletions.
diff --git a/...pshots__/scenes-app-llm-observability-conversation-display--anthropic--dark.png b/...pshots__/scenes-app-llm-observability-conversation-display--anthropic--dark.png
diff --git a/...shots__/scenes-app-llm-observability-conversation-display--anthropic--light.png b/...shots__/scenes-app-llm-observability-conversation-display--anthropic--light.png
diff --git a/..._snapshots__/scenes-app-llm-observability-conversation-display--basic--dark.png b/..._snapshots__/scenes-app-llm-observability-conversation-display--basic--dark.png
diff --git a/...snapshots__/scenes-app-llm-observability-conversation-display--basic--light.png b/...snapshots__/scenes-app-llm-observability-conversation-display--basic--light.png
diff --git a/..._snapshots__/scenes-app-llm-observability-conversation-display--error--dark.png b/..._snapshots__/scenes-app-llm-observability-conversation-display--error--dark.png
diff --git a/...snapshots__/scenes-app-llm-observability-conversation-display--error--light.png b/...snapshots__/scenes-app-llm-observability-conversation-display--error--light.png
diff --git a/...apshots__/scenes-app-llm-observability-conversation-display--markdown--dark.png b/...apshots__/scenes-app-llm-observability-conversation-display--markdown--dark.png
diff --git a/...pshots__/scenes-app-llm-observability-conversation-display--markdown--light.png b/...pshots__/scenes-app-llm-observability-conversation-display--markdown--light.png
diff --git a/..._snapshots__/scenes-app-llm-observability-conversation-display--tools--dark.png b/..._snapshots__/scenes-app-llm-observability-conversation-display--tools--dark.png
diff --git a/...snapshots__/scenes-app-llm-observability-conversation-display--tools--light.png b/...snapshots__/scenes-app-llm-observability-conversation-display--tools--light.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png
diff --git a/frontend/src/scenes/surveys/Survey.tsx b/frontend/src/scenes/surveys/Survey.tsx
@@ -138,17 +138,17 @@ export function SurveyDisplaySummary({
                 </div>
             )}
             {survey.conditions?.deviceTypes && (
-                <div className="flex flex-col font-medium gap-1">
-                    <div className="flex-row">
-                        <span>
-                            Device Types{' '}
-                            {SurveyMatchTypeLabels[
-                                survey.conditions?.deviceTypesMatchType || SurveyMatchType.Contains
-                            ].slice(2)}
-                            :
-                        </span>{' '}
-                        <LemonTag>{survey.conditions.deviceTypes?.join(', ')}</LemonTag>
-                    </div>
+                <div className="flex font-medium gap-1 items-center">
+                    <span>
+                        Device Types{' '}
+                        {SurveyMatchTypeLabels[
+                            survey.conditions?.deviceTypesMatchType || SurveyMatchType.Contains
+                        ].slice(2)}
+                        :
+                    </span>{' '}
+                    {survey.conditions.deviceTypes.map((type) => (
+                        <LemonTag key={type}>{type}</LemonTag>
+                    ))}
                 </div>
             )}
             {survey.conditions?.selector && (
@@ -182,10 +182,12 @@ export function SurveyDisplaySummary({
                 </div>
             )}
             {targetingFlagFilters && (
-                <BindLogic logic={featureFlagLogic} props={{ id: survey.targeting_flag?.id || 'new' }}>
-                    <span className="font-medium">User properties:</span>{' '}
-                    <FeatureFlagReleaseConditions readOnly excludeTitle filters={targetingFlagFilters} />
-                </BindLogic>
+                <div>
+                    <BindLogic logic={featureFlagLogic} props={{ id: survey.targeting_flag?.id || 'new' }}>
+                        <span className="font-medium">User properties:</span>{' '}
+                        <FeatureFlagReleaseConditions readOnly excludeTitle filters={targetingFlagFilters} />
+                    </BindLogic>
+                </div>
             )}
         </div>
     )