🐛 Fix(web): Prevent long titles from breaking event styles (#231)

* fix(web): convert event title from Textrea to Input

Inputs don't automatically wrap like text areas, so this fixes the bug in #142

* fix(web): set fixed width for SidebarTabContainer

This prevents a long title from expanding the rectangle width

Author: tyler-dane

packages/web/src/views/Calendar/components/Sidebar/styled.ts

@@ -70,7 +70,7 @@ export const SidebarTabContainer = styled.div`
   height: calc(100% - ${ICON_ROW_HEIGHT}px);
   overflow: auto;
   padding: 0 25px;
-  width: 100%;
+  width: ${SIDEBAR_OPEN_WIDTH}px;
 
   ::-webkit-scrollbar {
     width: 8px;

packages/web/src/views/Forms/EventForm/styled.ts

@@ -5,6 +5,7 @@ import { Flex } from "@web/components/Flex";
 import { Textarea } from "@web/components/Textarea";
 import { hoverColorByPriority } from "@web/common/styles/theme.util";
 import { PriorityButton } from "@web/components/Button/styled";
+import { Input } from "@web/components/Input";
 
 import { StyledFormProps } from "./types";
 
@@ -56,9 +57,10 @@ export const StyledSubmitRow = styled(Flex)`
   padding-top: 18px;
 `;
 
-export const StyledTitle = styled(Textarea)`
+export const StyledTitle = styled(Input)`
   background: transparent;
   font-size: ${({ theme }) => theme.text.size["5xl"]};
+  font-weight: 600;
   &:hover {
     filter: brightness(90%);
   }