VIDCS-3475: Provide better styling for the `Send` button in the Feedback panel #107

cpettet · 2025-02-28T17:03:51Z

What is this PR doing?

Description

Fixes the styling on the Feedback panel

Screenshots and GIF

How should this be manually tested?

checkout this branch
apply the following diff

diff --git a/frontend/src/hooks/useRightPanel.tsx b/frontend/src/hooks/useRightPanel.tsx
index 039923e..a70d866 100644
--- a/frontend/src/hooks/useRightPanel.tsx
+++ b/frontend/src/hooks/useRightPanel.tsx
@@ -22,7 +22,7 @@ export type UseRightPanel = {
  */
 const useRightPanel = (): UseRightPanel => {
   const [rightPanelState, setRightPanelState] = useState<RightPanelState>({
-    activeTab: 'closed',
+    activeTab: 'issues',
     unreadCount: 0,
   });

copy snippet above and use terminal command: pbpaste | git apply
check everything looks okay in a variety of viewports

What are the relevant tickets?

A maintainer will add this ticket number.

Resolves VIDCS-3475

Checklist

[ ] Branch is based on develop (not main).
[ ] Resolves a Known Issue.
[ ] If yes, did you remove the item from the docs/KNOWN_ISSUES.md?
[ ] Resolves an item reported in Issues.
If yes, which issue? Issue Number?

cpettet · 2025-02-28T17:06:29Z

frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx

+          overflowX: 'hidden',
+          overflowY: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          height,


These are the tailwindcss classes in the eliminated div above.

cpettet · 2025-02-28T17:06:55Z

frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx

+        ml="25px"
+        mr="25px"


I was wondering why things looked a little off 😅

v-kpheng

LGTM! 💪 🚀

frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx

v-kpheng · 2025-02-28T18:26:55Z

frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx

-  const widthClass = isSmallViewport ? '@apply w-[calc(100dvw_-_48px)]' : '';
+  // Account for: 64px panel header + 80px toolbar if small viewport or 96px toolbar if normal viewport + (40px submit button + 24px submit button margin)
+  const height = isSmallViewport ? 'calc(100dvh - 208px)' : 'calc(100dvh - 224px)';
+  const width = isSmallViewport ? 'calc(100dvw - 50px)' : '310px';


~~60 + 80 = 124~~
64 + 80 = 144 (🙈 .... remind me never to help my kids with math 😄)
40 + 24 = 64

How do we arrive that the magic literals used here? Just curious.

Great question that others would surely have! I added that into the last commit. Let me know if it's not clear.

Naively, seems like we can use variables to calculate these CSS values. That said, a tech debt item for another day, if we decide to cross that bridge.

sonarqubecloud · 2025-02-28T19:38:59Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
91.7% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

v-kpheng

LGTM! 💪 🚀

v-kpheng · 2025-02-28T21:31:19Z

frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx

-  const widthClass = isSmallViewport ? '@apply w-[calc(100dvw_-_48px)]' : '';
+  // Account for: 64px panel header + 80px toolbar if small viewport or 96px toolbar if normal viewport + (40px submit button + 24px submit button margin)
+  const height = isSmallViewport ? 'calc(100dvh - 208px)' : 'calc(100dvh - 224px)';
+  const width = isSmallViewport ? 'calc(100dvw - 50px)' : '310px';


Naively, seems like we can use variables to calculate these CSS values. That said, a tech debt item for another day, if we decide to cross that bridge.

maikthomas

LGTM!

behei-vonage · 2025-03-03T15:37:27Z

tested, LGTM 🚀

💅

a98fad7

cpettet commented Feb 28, 2025

View reviewed changes

v-kpheng previously approved these changes Feb 28, 2025

View reviewed changes

great questions, and hopefully great comments, too

65c4370

cpettet dismissed v-kpheng’s stale review via 65c4370 February 28, 2025 19:33

cpettet requested a review from v-kpheng February 28, 2025 19:34

v-kpheng approved these changes Feb 28, 2025

View reviewed changes

maikthomas approved these changes Mar 3, 2025

View reviewed changes

cpettet merged commit 4062a59 into develop Mar 3, 2025
7 checks passed

cpettet deleted the cpettet/vidcs-3475-style-send-button branch March 3, 2025 15:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VIDCS-3475: Provide better styling for the `Send` button in the Feedback panel #107

VIDCS-3475: Provide better styling for the `Send` button in the Feedback panel #107

cpettet commented Feb 28, 2025

cpettet Feb 28, 2025

cpettet Feb 28, 2025

v-kpheng left a comment

v-kpheng Feb 28, 2025 •

edited

Loading

cpettet Feb 28, 2025

v-kpheng Feb 28, 2025

sonarqubecloud bot commented Feb 28, 2025

v-kpheng left a comment

v-kpheng Feb 28, 2025

maikthomas left a comment

behei-vonage commented Mar 3, 2025

VIDCS-3475: Provide better styling for the Send button in the Feedback panel #107

VIDCS-3475: Provide better styling for the Send button in the Feedback panel #107

Conversation

cpettet commented Feb 28, 2025

What is this PR doing?

Description

Screenshots and GIF

How should this be manually tested?

What are the relevant tickets?

Checklist

cpettet Feb 28, 2025

Choose a reason for hiding this comment

cpettet Feb 28, 2025

Choose a reason for hiding this comment

v-kpheng left a comment

Choose a reason for hiding this comment

v-kpheng Feb 28, 2025 • edited Loading

Choose a reason for hiding this comment

cpettet Feb 28, 2025

Choose a reason for hiding this comment

v-kpheng Feb 28, 2025

Choose a reason for hiding this comment

sonarqubecloud bot commented Feb 28, 2025

Quality Gate passed

v-kpheng left a comment

Choose a reason for hiding this comment

v-kpheng Feb 28, 2025

Choose a reason for hiding this comment

maikthomas left a comment

Choose a reason for hiding this comment

behei-vonage commented Mar 3, 2025

VIDCS-3475: Provide better styling for the `Send` button in the Feedback panel #107

VIDCS-3475: Provide better styling for the `Send` button in the Feedback panel #107

v-kpheng Feb 28, 2025 •

edited

Loading