web: fix ui for longer language strings

apps/web/src/components/auth-container/index.jsx

@@ -208,18 +208,20 @@ function AuthContainer(props) {
               {version.status === "fulfilled" &&
               version.value.instance !== "default" ? (
                 <>
-                  Using{" "}
-                  {version.value.instance + ` (v${version.value.version})`}
+                  {strings.usingInstance(
+                    version.value.instance,
+                    version.value.version
+                  )}
                 </>
               ) : (
-                <>Using official Notesnook instance.</>
+                <>{strings.usingOfficialInstance()}</>
               )}
             </Text>
             <Button
               variant="anchor"
               onClick={() => SettingsDialog.show({ activeSection: "servers" })}
             >
-              Configure
+              {strings.configure()}
             </Button>
           </Flex>
         </Flex>

apps/web/src/components/dialog/index.tsx

@@ -137,7 +137,9 @@ function BaseDialog(props: React.PropsWithChildren<DialogProps>) {
                 sx={{
                   fontSize: "subheading",
                   textAlign: props.textAlignment || "left",
-                  color: "paragraph"
+                  color: "paragraph",
+                  overflowWrap: "anywhere",
+                  wordSpacing: "wrap"
                 }}
               >
                 {props.title}
@@ -148,7 +150,9 @@ function BaseDialog(props: React.PropsWithChildren<DialogProps>) {
                 variant="body"
                 sx={{
                   textAlign: props.textAlignment || "left",
-                  color: "var(--paragraph-secondary)"
+                  color: "var(--paragraph-secondary)",
+                  overflowWrap: "anywhere",
+                  wordSpacing: "wrap"
                 }}
               >
                 {props.description}
@@ -205,6 +209,12 @@ export function DialogButton(props: DialogButtonProps) {
       variant="dialog"
       disabled={props.disabled}
       onClick={props.disabled ? undefined : props.onClick}
+      sx={{
+        maxWidth: "100%",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap"
+      }}
     >
       {props.loading ? <Loading size={16} color="accent" /> : props.text}
     </Button>

apps/web/src/components/properties/index.tsx

@@ -189,16 +189,24 @@ function EditorProperties(props: EditorPropertiesProps) {
                 sx={{
                   borderBottom: "1px solid var(--separator)",
                   alignItems: "center",
-                  justifyContent: "space-between"
+                  justifyContent: "space-between",
+                  gap: 1
                 }}
               >
-                <Text variant="subBody" sx={{ fontSize: "body" }}>
+                <Text
+                  variant="subBody"
+                  sx={{
+                    fontSize: "body",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  }}
+                >
                   {item.label}
                 </Text>
                 <Text
                   className="selectable"
                   variant="subBody"
-                  sx={{ fontSize: "body" }}
+                  sx={{ fontSize: "body", flexShrink: 0 }}
                 >
                   {item.value(session.note[item.key])}
                 </Text>

apps/web/src/components/properties/toggle.tsx

@@ -39,22 +39,36 @@ function Toggle(props: ToggleProps) {
         cursor: "pointer",
         alignItems: "center",
         justifyContent: "space-between",
+        gap: 1,
 
         "& label": { width: "auto", flexShrink: 0 }
       }}
       data-test-id={props.testId}
       onClick={() => onToggle(!isOn)}
     >
-      <Text
-        variant="body"
-        sx={{ alignItems: "center", color: "paragraph", display: "flex" }}
+      <Flex
+        sx={{
+          alignItems: "center",
+
+          display: "flex"
+        }}
         data-test-id={`toggle-state-${isOn ? "on" : "off"}`}
       >
         <ToggleIcon size={13} sx={{ flexShrink: 0, mr: 1 }} />
-        {label}
-      </Text>
+        <Text
+          variant="body"
+          sx={{
+            color: "paragraph",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }}
+        >
+          {label}
+        </Text>
+      </Flex>
       <Switch
-        sx={{ m: 0, bg: isOn ? "accent" : "icon-secondary" }}
+        sx={{ m: 0, bg: isOn ? "accent" : "icon-secondary", flexShrink: 0 }}
         checked={isOn}
         onClick={(e) => e.stopPropagation()}
       />

apps/web/src/dialogs/settings/components/customize-toolbar.tsx

@@ -119,7 +119,10 @@ export function CustomizeToolbar() {
             <Label
               key={preset.id}
               variant="text.body"
-              sx={{ alignItems: "center", width: "auto" }}
+              sx={{
+                alignItems: "center",
+                width: "auto"
+              }}
             >
               <input
                 id={preset.id.toString()}
@@ -143,7 +146,15 @@ export function CustomizeToolbar() {
                   setCurrentPreset(getPreset(value as PresetId));
                 }}
               />
-              <span style={{ marginLeft: 5 }}>{preset.title}</span>
+              <span
+                style={{
+                  marginLeft: 5,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                }}
+              >
+                {preset.title}
+              </span>
               {preset.id === "custom" && !isUserPremium() ? (
                 <Pro color="accent" size={18} sx={{ ml: 1 }} />
               ) : null}

apps/web/src/dialogs/settings/index.tsx

@@ -331,7 +331,10 @@ function SettingsSideBar(props: SettingsSideBarProps) {
                   fontWeight: "bold",
                   color: "paragraph",
                   mx: 3,
-                  mb: 1
+                  mb: 1,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  wordSpacing: "nowrap"
                 }}
               >
                 {group.title}
@@ -463,7 +466,7 @@ function SettingItem(props: { item: Setting }) {
           gap: 4
         }}
       >
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: "column", flexShrink: 0 }}>
           <Text variant={"subtitle"}>{item.title}</Text>
           {item.description && (
             <Text
@@ -480,7 +483,6 @@ function SettingItem(props: { item: Setting }) {
         <Flex
           sx={{
             alignItems: "center",
-            flexShrink: 0,
             justifyContent: "end",
             gap: 2,
             "& > label": { width: "auto" }
@@ -592,7 +594,8 @@ function SelectComponent(
         border: "1px solid var(--border-secondary)",
         borderRadius: "5px",
         color: "var(--paragraph)",
-        padding: "5px"
+        padding: "5px",
+        overflow: "hidden"
       }}
       value={
         selectedOption.status === "fulfilled" ? selectedOption.value : undefined

packages/theme/src/theme/variants/button.ts

@@ -44,6 +44,10 @@ export const createButtonVariant = (
   px: 2,
   py: "7.5px",
 
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+
   transition: "transform 50ms ease-out",
   ":hover:not(:disabled):not(:active)": {
     bg: background,