From 6088d89d2603ae04922d9f51e4312f097856be3e Mon Sep 17 00:00:00 2001
From: gbowsky <grishaxtail@gmail.com>
Date: Thu, 21 Jan 2021 16:45:55 +0300
Subject: [PATCH 1/2] HorizontalCell: updated paddings and now they're applied
 to content

---
 src/components/HorizontalCell/HorizontalCell.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/HorizontalCell/HorizontalCell.css b/src/components/HorizontalCell/HorizontalCell.css
index 68063af07c..1bbaf099bd 100644
--- a/src/components/HorizontalCell/HorizontalCell.css
+++ b/src/components/HorizontalCell/HorizontalCell.css
@@ -1,5 +1,4 @@
 .HorizontalCell {
-  padding-bottom: 6px;
   display: flex;
 }
 
@@ -26,7 +25,7 @@
 }
 
 .HorizontalCell--s .HorizontalCell__content {
-  padding: 2px 4px;
+  padding: 2px 4px 8px 4px;
   text-align: center;
 }
 
@@ -45,7 +44,7 @@
 
 .HorizontalCell--m .HorizontalCell__content,
 .HorizontalCell--l .HorizontalCell__content {
-  padding: 2px 6px;
+  padding: 2px 6px 8px 6px;
   text-align: left;
 }
 

From ccaf47979a790a4e5a6aa7c4f98064e7e76da50f Mon Sep 17 00:00:00 2001
From: gbowsky <grishaxtail@gmail.com>
Date: Thu, 21 Jan 2021 18:25:40 +0300
Subject: [PATCH 2/2] HorizontalCell: fixed indentation, updated example, also
 design-review fixes.

---
 .../HorizontalCell/HorizontalCell.css         |  9 +++----
 src/components/HorizontalCell/Readme.md       | 24 ++++++++++---------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/HorizontalCell/HorizontalCell.css b/src/components/HorizontalCell/HorizontalCell.css
index 1bbaf099bd..f552ba2b63 100644
--- a/src/components/HorizontalCell/HorizontalCell.css
+++ b/src/components/HorizontalCell/HorizontalCell.css
@@ -9,6 +9,7 @@
 
 .HorizontalCell__content {
   word-break: break-all;
+  text-overflow: ellipsis;
 }
 
 .HorizontalCell__subtitle {
@@ -17,7 +18,7 @@
 }
 
 .HorizontalCell--s {
-  width: 72px;
+  max-width: 80px;
 }
 
 .HorizontalCell--s .HorizontalCell__image {
@@ -52,12 +53,12 @@
 .HorizontalCell--ios:first-child::before,
 .HorizontalCell--ios:last-child::after {
   content: "";
-  width: 4px;
+  min-width: 4px;
 }
 
 .HorizontalCell--ios.HorizontalCell--s:first-child,
 .HorizontalCell--ios.HorizontalCell--s:last-child {
-  width: 78px;
+  max-width: 88px;
 }
 
 .HorizontalCell--ios.HorizontalCell--m:first-child,
@@ -78,7 +79,7 @@
 .HorizontalCell--android.HorizontalCell--s:last-child,
 .HorizontalCell--vkcom.HorizontalCell--s:first-child,
 .HorizontalCell--vkcom.HorizontalCell--s:last-child {
-  width: 80px;
+  max-width: 88px;
 }
 
 .HorizontalCell--android.HorizontalCell--m:first-child,
diff --git a/src/components/HorizontalCell/Readme.md b/src/components/HorizontalCell/Readme.md
index 547f50b4d6..323224af82 100644
--- a/src/components/HorizontalCell/Readme.md
+++ b/src/components/HorizontalCell/Readme.md
@@ -1,10 +1,10 @@
 HorizontalCell автоматически ставит отступы по бокам в зависимости от платформы, поэтому его лучше использовать в HorizontalScroll.
-* При `size='s'` рекомендуется `<Avatar size={56}/>` или же любой компонент шириной 56 пикс.
-* При `size='m'` рекомендуется `<Avatar size={88} mode='app'/>` или же любой компонент шириной 96 пикс.
-* При `size='l'` рекомендуется `<Avatar size={128} mode='image/>` или же любой компонент.
+* При `size='s'` **для iOS** рекомендуется `<Avatar size={64}/>`, а для остальных платформ `<Avatar size={56}/>` или же любой компонент шириной до 64 пикс.
+* При `size='m'` рекомендуется `<Avatar size={88} mode='app'/>` или же любой компонент шириной до 96 пикс.
+* При `size='l'` рекомендуется `<Avatar size={128} mode='image/>` или же любой компонент произвольной ширины.
 
 ```jsx
-class HorizontalCellExample extends React.Component {
+const HorizontalCellExample = withPlatform(class HorizontalCellExample extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -17,6 +17,8 @@ class HorizontalCellExample extends React.Component {
   }
 
   componentDidMount() {
+    const { platform } = this.props;
+    
     const largeImageStyles = {
       width: 220,
       height: 124,
@@ -30,7 +32,7 @@ class HorizontalCellExample extends React.Component {
     users.forEach((user) => {
       generatedUserItems.push(
         <HorizontalCell size='s' header={user.first_name}>
-          <Avatar size={56} src={user.photo_100}/>
+          <Avatar size={platform === 'ios' ? 64 : 56} src={user.photo_100}/>
         </HorizontalCell>
       )
     })
@@ -38,19 +40,19 @@ class HorizontalCellExample extends React.Component {
     
     let exampleMiniApps = [
       <HorizontalCell size='s' header='Промокот'>
-        <Avatar size={56} mode='app'
+        <Avatar size={platform === 'ios' ? 64 : 56} mode='app'
                 src='https://sun9-54.userapi.com/c850536/v850536134/15096d/6806J7q6YwM.jpg'/>
       </HorizontalCell>,
       <HorizontalCell size='s' header='Разделите счёт'>
-        <Avatar size={56} mode='app'
+        <Avatar size={platform === 'ios' ? 64 : 56} mode='app'
                 src='https://sun9-20.userapi.com/c857416/v857416681/fc6d0/06XQvs4SyiE.jpg'/>
       </HorizontalCell>,
       <HorizontalCell size='s' header='Рассылки'>
-        <Avatar size={56} mode='app'
+        <Avatar size={platform === 'ios' ? 64 : 56} mode='app'
                 src='https://sun9-50.userapi.com/c850536/v850536397/129313/qdVJ7A7xd70.jpg'/>
       </HorizontalCell>,
       <HorizontalCell size='s' header='Тексты песен'>
-        <Avatar size={56} mode='app'
+        <Avatar size={platform === 'ios' ? 64 : 56} mode='app'
                 src='https://sun9-41.userapi.com/Zf2HluZJZDYjTbxhnSfeYnHtttBYsYbdjJ3QJQ/aDcJQrVVnbQ.jpg'/>
       </HorizontalCell>];
     let generatedMiniAppsItems = [];
@@ -117,7 +119,7 @@ class HorizontalCellExample extends React.Component {
     this.setState({albumItems: generatedAlbums})
   }
 
-  render() {
+  render() { 
     return (
       <View activePanel="horizontalCell">
         <Panel id="horizontalCell">
@@ -163,7 +165,7 @@ class HorizontalCellExample extends React.Component {
       </View>
     )
   }
-}
+});
 
 <HorizontalCellExample/>
 ```