diff --git a/apps/mobile/app/components/list/card.js b/apps/mobile/app/components/list/card.js
index 8feacec6b..446893243 100644
--- a/apps/mobile/app/components/list/card.js
+++ b/apps/mobile/app/components/list/card.js
@@ -18,7 +18,7 @@ along with this program. If not, see .
*/
import React from "react";
-import { View } from "react-native";
+import { Dimensions, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useMessageStore } from "../../stores/use-message-store";
import { useThemeColors } from "@notesnook/theme";
@@ -32,6 +32,7 @@ export const Card = ({ color, warning }) => {
color = color ? color : colors.primary.accent;
const messageBoardState = useMessageStore((state) => state.message);
const announcement = useMessageStore((state) => state.announcement);
+ const fontScale = Dimensions.get("window").fontScale;
return !messageBoardState.visible || announcement || warning ? null : (
{
type="gray"
customStyle={{
paddingVertical: 12,
- width: "95%",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
@@ -54,17 +54,18 @@ export const Card = ({ color, warning }) => {
{
color={
messageBoardState.type === "error" ? colors.error.icon : color
}
+ allowFontScaling
name={messageBoardState.icon}
/>
@@ -91,7 +93,7 @@ export const Card = ({ color, warning }) => {
{
-
-
-
+ {fontScale > 1 ? null : (
+
+
+
+ )}
);
diff --git a/apps/mobile/app/components/properties/index.js b/apps/mobile/app/components/properties/index.js
index 1896e93a9..d32c065a1 100644
--- a/apps/mobile/app/components/properties/index.js
+++ b/apps/mobile/app/components/properties/index.js
@@ -16,8 +16,8 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
-import React from "react";
-import { Platform, View } from "react-native";
+import React, { useRef } from "react";
+import { Dimensions, Platform, View, useWindowDimensions } from "react-native";
import { FlatList } from "react-native-actions-sheet";
import { db } from "../../common/database";
import { DDS } from "../../services/device-detection";
@@ -54,7 +54,6 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
const { colors } = useThemeColors();
const alias = item.alias || item.title;
const isColor = !!ColorValues[item.title];
-
if (!item || !item.id) {
return (
@@ -62,6 +61,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
);
}
+
return (
{}, item, buttons = [] }) => {
}, 1000);
}}
/>
+
{DDS.isTab ? (
diff --git a/apps/mobile/app/components/properties/items.js b/apps/mobile/app/components/properties/items.js
index b06ac0330..8c4bb2267 100644
--- a/apps/mobile/app/components/properties/items.js
+++ b/apps/mobile/app/components/properties/items.js
@@ -18,7 +18,7 @@ along with this program. If not, see .
*/
import React from "react";
-import { FlatList, ScrollView, View } from "react-native";
+import { Dimensions, FlatList, ScrollView, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useActions } from "../../hooks/use-actions";
import { DDS } from "../../services/device-detection";
@@ -33,9 +33,11 @@ export const Items = ({ item, buttons, close }) => {
const dimensions = useSettingStore((state) => state.dimensions);
const actions = useActions({ item, close });
const data = actions.filter((i) => buttons.indexOf(i.id) > -1 && !i.hidden);
-
let width = dimensions.width > 600 ? 600 : dimensions.width;
- let columnItemsCount = DDS.isLargeTablet() ? 7 : 5;
+ const shouldShrink =
+ Dimensions.get("window").fontScale > 1 &&
+ Dimensions.get("window").width < 450;
+ let columnItemsCount = DDS.isLargeTablet() ? 7 : shouldShrink ? 4 : 5;
let columnItemWidth = DDS.isTab
? (width - 12) / columnItemsCount
: (width - 12) / columnItemsCount;
@@ -66,6 +68,7 @@ export const Items = ({ item, buttons, close }) => {
}}
>
{
/>
-
+
{item.title}
@@ -139,6 +146,7 @@ export const Items = ({ item, buttons, close }) => {
>
{
/>
-
+
{item.title}
@@ -163,9 +175,12 @@ export const Items = ({ item, buttons, close }) => {
"copy",
"share",
"export",
- "lock-unlock",
- "publish"
+ "lock-unlock"
];
+ if (!shouldShrink) {
+ topBarItemsList.push("publish");
+ }
+
const topBarItems = data.filter(
(item) => topBarItemsList.indexOf(item.id) > -1
);
diff --git a/apps/mobile/app/components/properties/synced.js b/apps/mobile/app/components/properties/synced.js
index ef2c2bd59..e271944f4 100644
--- a/apps/mobile/app/components/properties/synced.js
+++ b/apps/mobile/app/components/properties/synced.js
@@ -17,10 +17,10 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
-import React from "react";
-import { View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { View, useWindowDimensions } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useUserStore } from "../../stores/use-user-store";
import { openLinkInBrowser } from "../../utils/functions";
import { SIZE } from "../../utils/size";
@@ -33,6 +33,8 @@ export const Synced = ({ item, close }) => {
const user = useUserStore((state) => state.user);
const lastSynced = useUserStore((state) => state.lastSynced);
+ const dimensions = useWindowDimensions();
+ const shouldShrink = dimensions.fontScale > 1 && dimensions.width < 450;
return user && lastSynced >= item.dateModified ? (
{
borderTopColor: colors.secondary.background
}}
>
-
+
{
>
Encrypted and synced
-
- No one can view this {item.itemType || item.type} except you.
-
+ {shouldShrink ? null : (
+
+ No one can view this {item.itemType || item.type} except you.
+
+ )}