diff --git a/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css b/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css index 83e1e1febc..ab1c832711 100644 --- a/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css +++ b/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css @@ -2,6 +2,7 @@ $conversationModalHighlightBackground: $colors-teal-100; $conversationModalCommentText: var(--palette-text-500); .root { flex: 1; + padding: 0 var(--spacing-2); } .line { @@ -42,6 +43,7 @@ $conversationModalCommentText: var(--palette-text-500); .rejectButton { height: fit-content; + margin-top: var(--spacing-1); &:disabled { background-color: var(--palette-error-500) !important; opacity: 1 !important; diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.css b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.css index f6ff02c357..9d2dab0aa8 100644 --- a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.css +++ b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.css @@ -26,7 +26,7 @@ .refreshButtonIcon { padding-right: 0.2rem; - display: inline-block; + display: inline; } .refreshButtonIcon svg { @@ -44,7 +44,7 @@ } .closeButtonIcon { - display: inline-block; + display: inline; } .closeButtonIcon svg { diff --git a/src/core/client/stream/test/comments/components/CommentContainer.spec.tsx b/src/core/client/stream/test/comments/components/CommentContainer.spec.tsx index 020f091479..960fc96b8a 100644 --- a/src/core/client/stream/test/comments/components/CommentContainer.spec.tsx +++ b/src/core/client/stream/test/comments/components/CommentContainer.spec.tsx @@ -1,6 +1,6 @@ -import { screen, within } from "@testing-library/react"; -import { pureMerge } from "coral-common/utils"; +import { screen, waitFor, within } from "@testing-library/react"; +import { pureMerge } from "coral-common/utils"; import { GQLResolver } from "coral-framework/schema"; import { createResolversStub, @@ -44,7 +44,19 @@ async function createTestRenderer( customRenderAppWithContext(context); - const container = await screen.findByTestId("comments-allComments-log"); + // it is usually best practice to use findByTestId + // for async work. + // + // source: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find + // + // however, for some special occasions, the test runner + // has a hard time and doing a .getByTestId is more + // performant. Since this cuts the `render username and body` + // test from 1.32s down to 795ms on my machine, I'm doing + // a waitFor + getByTestId here. + const container = await waitFor(() => + screen.getByTestId("comments-allComments-log") + ); return { container, context }; }